From 3d3e4bb034168c406a3d1b64643686c878d4c67f Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 12:42:16 +0530
Subject: [PATCH 01/43] updated content block

---
 .../page/[pageId]/PageEditorV2.tsx            |  66 ++++----
 components/editor/BlockV2.tsx                 | 144 +++++++++++++-----
 components/editor/ContentEditableV2.tsx       |   1 +
 components/editor/NotionEditor.tsx            |   2 +-
 4 files changed, 138 insertions(+), 75 deletions(-)

diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
index dc3209b..ec6d077 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
@@ -244,39 +244,41 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
         onUpdate={handleRefresh}
       />
       
-      {/* Main Content */}
-      <div className="max-w-[900px] mx-auto px-[96px] pb-[30vh]">
-        {/* Title */}
-        <div className={cn(
-          "pt-4",
-          !icon && !coverImage && "pt-[5vh]"
-        )}>
-          <textarea
-            ref={titleRef}
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            placeholder="Untitled"
-            className={cn(
-              "w-full bg-transparent border-none outline-none resize-none",
-              "text-[40px] font-bold text-[#37352f] dark:text-[#e9e9e7] leading-[1.2]",
-              "placeholder:text-[#37352f4d] dark:placeholder:text-[#e9e9e780]"
-            )}
-            rows={1}
-            style={{ 
-              fontFamily: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"'
-            }}
-          />
-        </div>
+      {/* Main Content - Notion-style centered layout */}
+      <div className="w-full px-[96px] pb-[30vh]">
+        <div className="max-w-[900px] mx-auto">
+          {/* Title */}
+          <div className={cn(
+            "pt-4",
+            !icon && !coverImage && "pt-[5vh]"
+          )}>
+            <textarea
+              ref={titleRef}
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Untitled"
+              className={cn(
+                "w-full bg-transparent border-none outline-none resize-none",
+                "text-[40px] font-bold text-[#37352f] dark:text-[#e9e9e7] leading-[1.2]",
+                "placeholder:text-[#37352f4d] dark:placeholder:text-[#e9e9e780]"
+              )}
+              rows={1}
+              style={{ 
+                fontFamily: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"'
+              }}
+            />
+          </div>
 
-        {/* Editor */}
-        <div className="mt-2">
-          <NotionEditor
-            pageId={page.id}
-            initialBlocks={initialBlocks}
-            onAutoSave={handleAutoSave}
-            showSaveStatus={false}
-            autoSaveInterval={2000}
-          />
+          {/* Editor */}
+          <div className="mt-2">
+            <NotionEditor
+              pageId={page.id}
+              initialBlocks={initialBlocks}
+              onAutoSave={handleAutoSave}
+              showSaveStatus={false}
+              autoSaveInterval={2000}
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/editor/BlockV2.tsx b/components/editor/BlockV2.tsx
index 487e26c..09847ba 100644
--- a/components/editor/BlockV2.tsx
+++ b/components/editor/BlockV2.tsx
@@ -97,6 +97,32 @@ export default function BlockV2({
     onUpdate?.(block.id, { properties })
   }, [block.id, onUpdate])
 
+  // Focus a block by ID
+  const focusBlock = useCallback((blockId: string, position: 'start' | 'end' = 'start') => {
+    const blockElement = document.querySelector(`[data-block-id="${blockId}"]`)
+    if (!blockElement) return
+
+    const editableElement = blockElement.querySelector('[contenteditable="true"]') as HTMLElement
+    if (!editableElement) return
+
+    editableElement.focus()
+
+    // Set cursor position
+    const selection = window.getSelection()
+    const range = document.createRange()
+    
+    if (position === 'end') {
+      range.selectNodeContents(editableElement)
+      range.collapse(false)
+    } else {
+      range.setStart(editableElement, 0)
+      range.collapse(true)
+    }
+    
+    selection?.removeAllRanges()
+    selection?.addRange(range)
+  }, [])
+
   // Focus management
   const handleFocus = useCallback(() => {
     setIsFocused(true)
@@ -107,16 +133,87 @@ export default function BlockV2({
     setIsFocused(false)
   }, [])
 
+  // Get current block content  
+  const getBlockContent = useCallback((): string => {
+    if (typeof block.content === 'string') {
+      return block.content
+    }
+    if (Array.isArray(block.content)) {
+      return block.content.map(rt => rt.text).join('')
+    }
+    return ''
+  }, [block.content])
+
   // Keyboard handling
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
     const content = getBlockContent()
     const isContentEmpty = !content || content.trim() === ''
     
-    // Get cursor position for backspace handling
+    // Get cursor position for navigation and backspace handling
     const selection = window.getSelection()
     const cursorAtStart = selection?.rangeCount > 0 && 
                          selection.getRangeAt(0).startOffset === 0 && 
                          selection.getRangeAt(0).endOffset === 0
+    
+    // Get cursor position at end
+    const cursorAtEnd = () => {
+      if (!selection || selection.rangeCount === 0) return false
+      const range = selection.getRangeAt(0)
+      const element = contentRef.current?.querySelector('[contenteditable="true"]')
+      if (!element) return false
+      
+      // For simple check, get the text content length
+      const textContent = element.textContent || ''
+      const textLength = textContent.length
+      
+      // Check if cursor is at the end
+      // For contenteditable, we need to check both start and end offset
+      if (range.startContainer === element || element.contains(range.startContainer)) {
+        // If it's a text node
+        if (range.startContainer.nodeType === Node.TEXT_NODE) {
+          const textNode = range.startContainer as Text
+          return range.startOffset === textNode.length && range.collapsed
+        }
+        // If it's the element itself, check against child nodes
+        return range.startOffset === element.childNodes.length && range.collapsed
+      }
+      
+      return false
+    }
+
+    // Handle Arrow Up - move to previous block
+    if (e.key === 'ArrowUp') {
+      if (cursorAtStart || isContentEmpty) {
+        e.preventDefault()
+        const allBlocks = Array.from(document.querySelectorAll('[data-block-id]'))
+        const currentIndex = allBlocks.findIndex(el => el.getAttribute('data-block-id') === block.id)
+        
+        if (currentIndex > 0) {
+          const previousBlockId = allBlocks[currentIndex - 1].getAttribute('data-block-id')
+          if (previousBlockId) {
+            focusBlock(previousBlockId, 'end')
+          }
+        }
+      }
+      return
+    }
+
+    // Handle Arrow Down - move to next block  
+    if (e.key === 'ArrowDown') {
+      if (cursorAtEnd() || isContentEmpty) {
+        e.preventDefault()
+        const allBlocks = Array.from(document.querySelectorAll('[data-block-id]'))
+        const currentIndex = allBlocks.findIndex(el => el.getAttribute('data-block-id') === block.id)
+        
+        if (currentIndex < allBlocks.length - 1) {
+          const nextBlockId = allBlocks[currentIndex + 1].getAttribute('data-block-id')
+          if (nextBlockId) {
+            focusBlock(nextBlockId, 'start')
+          }
+        }
+      }
+      return
+    }
 
     // Handle Enter key
     if (e.key === 'Enter') {
@@ -183,18 +280,7 @@ export default function BlockV2({
       // Let ListBlock handle tab indentation
       return
     }
-  }, [block])
-
-  // Get current block content
-  const getBlockContent = useCallback((): string => {
-    if (typeof block.content === 'string') {
-      return block.content
-    }
-    if (Array.isArray(block.content)) {
-      return block.content.map(rt => rt.text).join('')
-    }
-    return ''
-  }, [block.content])
+  }, [block, focusBlock, getBlockContent, onAddBlock, onUpdate, onDelete])
 
   // Create new block after current block
   const createNewBlock = useCallback((type: BlockTypeEnum) => {
@@ -206,7 +292,7 @@ export default function BlockV2({
         focusBlock(newBlockId)
       }, 10)
     }
-  }, [block.id, onAddBlock])
+  }, [block.id, onAddBlock, focusBlock])
 
   // Handle backspace on empty block
   const handleEmptyBackspace = useCallback(() => {
@@ -223,33 +309,7 @@ export default function BlockV2({
     
     // Delete current block
     onDelete?.(block.id)
-  }, [block.id, onDelete])
-
-  // Focus a block by ID
-  const focusBlock = useCallback((blockId: string, position: 'start' | 'end' = 'start') => {
-    const blockElement = document.querySelector(`[data-block-id="${blockId}"]`)
-    if (!blockElement) return
-
-    const editableElement = blockElement.querySelector('[contenteditable="true"]') as HTMLElement
-    if (!editableElement) return
-
-    editableElement.focus()
-
-    // Set cursor position
-    const selection = window.getSelection()
-    const range = document.createRange()
-    
-    if (position === 'end') {
-      range.selectNodeContents(editableElement)
-      range.collapse(false)
-    } else {
-      range.setStart(editableElement, 0)
-      range.collapse(true)
-    }
-    
-    selection?.removeAllRanges()
-    selection?.addRange(range)
-  }, [])
+  }, [block.id, onDelete, focusBlock])
 
   // Handle add block from handle with debounce
   const isAddingBlockRef = useRef(false)
@@ -364,7 +424,7 @@ export default function BlockV2({
       onMouseLeave={handleMouseLeave}
     >
       {/* Block handle positioned with negative margin */}
-      <div className="absolute -left-12 top-1 z-10">
+      <div className="absolute -left-14 top-1 z-10">
         <BlockHandle
           isVisible={showHandle}
           onAddBlock={handleAddBlock}
diff --git a/components/editor/ContentEditableV2.tsx b/components/editor/ContentEditableV2.tsx
index a9b2164..18f1fcf 100644
--- a/components/editor/ContentEditableV2.tsx
+++ b/components/editor/ContentEditableV2.tsx
@@ -183,6 +183,7 @@ export default function ContentEditableV2({
       }
     }
     
+    // Pass through arrow keys for block navigation
     onKeyDown?.(e)
   }, [allowFormatting, onKeyDown, handleInput, readOnly])
 
diff --git a/components/editor/NotionEditor.tsx b/components/editor/NotionEditor.tsx
index 191aae7..b42a792 100644
--- a/components/editor/NotionEditor.tsx
+++ b/components/editor/NotionEditor.tsx
@@ -387,7 +387,7 @@ export default function NotionEditor({
         </div>
       )}
 
-      <div ref={editorRef} className="notion-editor relative w-full pl-8">
+      <div ref={editorRef} className="notion-editor relative w-full ml-3">
         <DndContext 
           collisionDetection={closestCenter} 
           onDragStart={handleDragStart}

From 6bb8ee2159c1a7bdcee12b3ff6840bb2aaaccf00 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 12:46:04 +0530
Subject: [PATCH 02/43] fix content alignement

---
 components/editor/BlockV2.tsx      | 2 +-
 components/editor/NotionEditor.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/editor/BlockV2.tsx b/components/editor/BlockV2.tsx
index 09847ba..99d4619 100644
--- a/components/editor/BlockV2.tsx
+++ b/components/editor/BlockV2.tsx
@@ -424,7 +424,7 @@ export default function BlockV2({
       onMouseLeave={handleMouseLeave}
     >
       {/* Block handle positioned with negative margin */}
-      <div className="absolute -left-14 top-1 z-10">
+      <div className="absolute -left-12 top-1 z-10">
         <BlockHandle
           isVisible={showHandle}
           onAddBlock={handleAddBlock}
diff --git a/components/editor/NotionEditor.tsx b/components/editor/NotionEditor.tsx
index b42a792..a0c76e4 100644
--- a/components/editor/NotionEditor.tsx
+++ b/components/editor/NotionEditor.tsx
@@ -387,7 +387,7 @@ export default function NotionEditor({
         </div>
       )}
 
-      <div ref={editorRef} className="notion-editor relative w-full ml-3">
+      <div ref={editorRef} className="notion-editor relative w-full">
         <DndContext 
           collisionDetection={closestCenter} 
           onDragStart={handleDragStart}

From 587df084db7d99b18952edfc52a2ef4912f471bc Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 13:08:53 +0530
Subject: [PATCH 03/43] emoji alignemtn fix

---
 components/page/notion-page-header.tsx | 216 +++++++++++++------------
 1 file changed, 109 insertions(+), 107 deletions(-)

diff --git a/components/page/notion-page-header.tsx b/components/page/notion-page-header.tsx
index a2954d6..1c2e566 100644
--- a/components/page/notion-page-header.tsx
+++ b/components/page/notion-page-header.tsx
@@ -179,71 +179,72 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
         </div>
       )}
 
-      <div className="max-w-[900px] mx-auto px-[96px]">
-        {/* Add Cover / Add Icon buttons */}
-        {(!coverImage || !icon) && (
-          <div className="flex gap-2 py-3 opacity-0 hover:opacity-100 transition-opacity">
-            {!icon && (
+      <div className="w-full px-[96px]">
+        <div className="max-w-[900px] mx-auto">
+          {/* Add Cover / Add Icon buttons */}
+          {(!coverImage || !icon) && (
+            <div className="flex gap-2 py-3 opacity-0 hover:opacity-100 transition-opacity">
+              {!icon && (
+                <button
+                  className="text-sm text-[#37352f80] hover:bg-[#37352f0a] px-3 py-1 rounded"
+                  onMouseEnter={() => setHoveredAddIcon(true)}
+                  onMouseLeave={() => setHoveredAddIcon(false)}
+                  onClick={() => setShowEmojiPicker(true)}
+                >
+                  <Smile className="inline h-4 w-4 mr-1.5" />
+                  Add icon
+                </button>
+              )}
+              {!coverImage && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      className="text-sm text-[#37352f80] hover:bg-[#37352f0a] px-3 py-1 rounded"
+                      onMouseEnter={() => setHoveredAddCover(true)}
+                      onMouseLeave={() => setHoveredAddCover(false)}
+                    >
+                      <Image className="inline h-4 w-4 mr-1.5" />
+                      Add cover
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="w-[200px]">
+                    <DropdownMenuItem onClick={() => fileInputRef.current?.click()}>
+                      <Upload className="h-4 w-4 mr-2" />
+                      Upload
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <div className="p-2">
+                      <p className="text-xs text-muted-foreground mb-2">Gradients</p>
+                      <div className="grid grid-cols-3 gap-1">
+                        {gradients.map((gradient, i) => (
+                          <button
+                            key={i}
+                            className="h-12 rounded border hover:border-black/50"
+                            style={{ background: gradient }}
+                            onClick={() => updatePageCover(gradient)}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+              <button className="text-sm text-[#37352f80] hover:bg-[#37352f0a] px-3 py-1 rounded">
+                <MessageSquare className="inline h-4 w-4 mr-1.5" />
+                Add comment
+              </button>
+            </div>
+          )}
+
+          {/* Icon */}
+          {icon && (
+            <div className={`group relative inline-block ${coverImage ? '-mt-8' : 'mt-2'}`}>
               <button
-                className="text-sm text-[#37352f80] hover:bg-[#37352f0a] px-3 py-1 rounded"
-                onMouseEnter={() => setHoveredAddIcon(true)}
-                onMouseLeave={() => setHoveredAddIcon(false)}
                 onClick={() => setShowEmojiPicker(true)}
+                className="text-[78px] leading-none hover:bg-[#37352f0a] p-2 -ml-2 rounded transition-colors"
               >
-                <Smile className="inline h-4 w-4 mr-1.5" />
-                Add icon
+                {icon}
               </button>
-            )}
-            {!coverImage && (
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <button
-                    className="text-sm text-[#37352f80] hover:bg-[#37352f0a] px-3 py-1 rounded"
-                    onMouseEnter={() => setHoveredAddCover(true)}
-                    onMouseLeave={() => setHoveredAddCover(false)}
-                  >
-                    <Image className="inline h-4 w-4 mr-1.5" />
-                    Add cover
-                  </button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" className="w-[200px]">
-                  <DropdownMenuItem onClick={() => fileInputRef.current?.click()}>
-                    <Upload className="h-4 w-4 mr-2" />
-                    Upload
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <div className="p-2">
-                    <p className="text-xs text-muted-foreground mb-2">Gradients</p>
-                    <div className="grid grid-cols-3 gap-1">
-                      {gradients.map((gradient, i) => (
-                        <button
-                          key={i}
-                          className="h-12 rounded border hover:border-black/50"
-                          style={{ background: gradient }}
-                          onClick={() => updatePageCover(gradient)}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            )}
-            <button className="text-sm text-[#37352f80] hover:bg-[#37352f0a] px-3 py-1 rounded">
-              <MessageSquare className="inline h-4 w-4 mr-1.5" />
-              Add comment
-            </button>
-          </div>
-        )}
-
-        {/* Icon */}
-        {icon && (
-          <div className="group relative inline-block mt-2">
-            <button
-              onClick={() => setShowEmojiPicker(true)}
-              className="text-[78px] leading-none hover:bg-[#37352f0a] p-2 -ml-2 rounded transition-colors"
-            >
-              {icon}
-            </button>
             <button
               onClick={() => updatePageIcon("")}
               className="absolute -top-1 -right-1 opacity-0 group-hover:opacity-100 transition-opacity bg-white dark:bg-[#191919] rounded p-1 shadow-lg border"
@@ -253,49 +254,51 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
           </div>
         )}
 
-        {/* Top Bar Actions */}
-        <div className="flex items-center justify-end gap-2 py-2 text-sm text-[#37352f80]">
-          <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
-            Share
-          </button>
-          <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
-            <MessageSquare className="h-4 w-4" />
-          </button>
-          <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
-            <Clock className="h-4 w-4" />
-          </button>
-          <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
-            <Star className="h-4 w-4" />
-          </button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button className="hover:bg-[#37352f0a] p-1 rounded">
-                <MoreHorizontal className="h-4 w-4" />
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem>
-                <Copy className="h-4 w-4 mr-2" />
-                Duplicate
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <Move className="h-4 w-4 mr-2" />
-                Move to
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem 
-                onClick={() => setShowDeleteDialog(true)}
-                className="text-red-600 dark:text-red-400"
-              >
-                <Trash2 className="h-4 w-4 mr-2" />
-                Move to trash
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          {/* Top Bar Actions */}
+          <div className="flex items-center justify-end gap-2 py-2 text-sm text-[#37352f80]">
+            <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
+              Share
+            </button>
+            <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
+              <MessageSquare className="h-4 w-4" />
+            </button>
+            <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
+              <Clock className="h-4 w-4" />
+            </button>
+            <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
+              <Star className="h-4 w-4" />
+            </button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button className="hover:bg-[#37352f0a] p-1 rounded">
+                  <MoreHorizontal className="h-4 w-4" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>
+                  <Copy className="h-4 w-4 mr-2" />
+                  Duplicate
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Move className="h-4 w-4 mr-2" />
+                  Move to
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem 
+                  onClick={() => setShowDeleteDialog(true)}
+                  className="text-red-600 dark:text-red-400"
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  Move to trash
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
+      </div>
 
-        {/* Emoji Picker */}
-        {showEmojiPicker && (
+      {/* Emoji Picker */}
+      {showEmojiPicker && (
           <div 
             className="fixed inset-0 z-50 flex items-center justify-center" 
             onClick={() => setShowEmojiPicker(false)}
@@ -321,8 +324,8 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
           </div>
         )}
 
-        {/* Hidden File Input */}
-        <input
+      {/* Hidden File Input */}
+      <input
           ref={fileInputRef}
           type="file"
           accept="image/*"
@@ -339,8 +342,8 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
           className="hidden"
         />
 
-        {/* Delete Confirmation Dialog */}
-        <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
           <AlertDialogContent>
             <AlertDialogHeader>
               <AlertDialogTitle>Move to trash?</AlertDialogTitle>
@@ -360,7 +363,6 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialog>
-      </div>
     </>
   )
 }
\ No newline at end of file

From 3c055a7a00f510dff8cfd678a6a91db76e606611 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 13:20:29 +0530
Subject: [PATCH 04/43] fix hydration

---
 .../[workspaceId]/page/[pageId]/PageEditorV2.tsx  | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
index ec6d077..63c6d49 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
@@ -3,11 +3,24 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import { Block, PageContent } from '@/types'
-import NotionEditor from '@/components/editor/NotionEditor'
+import dynamic from 'next/dynamic'
 import { NotionPageHeader } from '@/components/page/notion-page-header'
 import { cn } from '@/lib/utils'
 import toast from 'react-hot-toast'
 
+// Dynamically import NotionEditor to avoid SSR hydration issues with DnD
+const NotionEditor = dynamic(
+  () => import('@/components/editor/NotionEditor'),
+  { 
+    ssr: false,
+    loading: () => (
+      <div className="flex items-center justify-center p-8">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      </div>
+    )
+  }
+)
+
 interface PageData {
   id: string
   title: string

From 70a8e8fbc5db894929841cb865684ab046a26e6c Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 13:23:01 +0530
Subject: [PATCH 05/43] fix title save

---
 .../workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
index 63c6d49..90044ed 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
@@ -88,7 +88,7 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
     
     try {
       const response = await fetch(`/api/pages/${page.id}`, {
-        method: 'PUT',
+        method: 'PATCH',
         headers: {
           'Content-Type': 'application/json',
         },

From ef6214fce9df75187e7b64945f5abb1dfd452ecd Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 13:29:14 +0530
Subject: [PATCH 06/43] page recusrsion

---
 app/icon.tsx                         | 34 ++++++++++++
 app/layout.tsx                       |  5 ++
 components/layout/notion-sidebar.tsx | 80 +++++++++++++++++-----------
 public/favicon.ico                   |  1 +
 public/favicon.svg                   |  7 +++
 5 files changed, 97 insertions(+), 30 deletions(-)
 create mode 100644 app/icon.tsx
 create mode 100644 public/favicon.ico
 create mode 100644 public/favicon.svg

diff --git a/app/icon.tsx b/app/icon.tsx
new file mode 100644
index 0000000..f52881a
--- /dev/null
+++ b/app/icon.tsx
@@ -0,0 +1,34 @@
+import { ImageResponse } from 'next/og'
+
+export const runtime = 'edge'
+
+export const size = {
+  width: 32,
+  height: 32,
+}
+export const contentType = 'image/png'
+
+export default function Icon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 24,
+          background: 'black',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'white',
+          borderRadius: 4,
+        }}
+      >
+        N
+      </div>
+    ),
+    {
+      ...size,
+    }
+  )
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 871868a..2f0b5ee 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -9,6 +9,11 @@ const inter = Inter({ subsets: ['latin'] })
 export const metadata: Metadata = {
   title: 'Notion Clone',
   description: 'A full-featured Notion clone built with Next.js',
+  icons: {
+    icon: '/favicon.svg',
+    shortcut: '/favicon.ico',
+    apple: '/favicon.svg',
+  },
 }
 
 export default function RootLayout({
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index f29d331..2e01d97 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -53,8 +53,6 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
   const [isLoading, setIsLoading] = useState(true)
   const [isCreatingPage, setIsCreatingPage] = useState(false)
   const [collapsed, setCollapsed] = useState(false)
-  const [expandedPages, setExpandedPages] = useState<Set<string>>(new Set())
-
   // Fetch workspaces
   useEffect(() => {
     async function fetchWorkspaces() {
@@ -153,15 +151,6 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
     }
   }
 
-  const togglePageExpanded = (pageId: string) => {
-    const newExpanded = new Set(expandedPages)
-    if (newExpanded.has(pageId)) {
-      newExpanded.delete(pageId)
-    } else {
-      newExpanded.add(pageId)
-    }
-    setExpandedPages(newExpanded)
-  }
 
   if (collapsed) {
     return (
@@ -281,14 +270,11 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
             ) : (
               <div className="space-y-0">
                 {pages.map((page) => (
-                  <PageItem 
+                  <RecursivePageItem 
                     key={page.id} 
                     page={page} 
                     workspaceId={currentWorkspace?.id || ''}
                     level={0}
-                    expanded={expandedPages.has(page.id)}
-                    onToggleExpand={() => togglePageExpanded(page.id)}
-                    onCreateSubpage={() => handleCreatePage(page.id)}
                   />
                 ))}
               </div>
@@ -355,27 +341,62 @@ function SidebarItem({
   )
 }
 
-function PageItem({ 
+// Recursive page item component that manages its own expand state
+function RecursivePageItem({ 
   page, 
   workspaceId, 
-  level = 0,
-  expanded,
-  onToggleExpand,
-  onCreateSubpage
+  level = 0
 }: { 
   page: any
   workspaceId: string
   level?: number
-  expanded: boolean
-  onToggleExpand: () => void
-  onCreateSubpage: () => void
 }) {
   const pathname = usePathname()
   const router = useRouter()
+  const [expanded, setExpanded] = useState(false)
+  const [isCreating, setIsCreating] = useState(false)
   const hasChildren = page.children && page.children.length > 0
   const isActive = pathname === `/workspace/${workspaceId}/page/${page.id}`
   const [showActions, setShowActions] = useState(false)
 
+  const handleCreateSubpage = async () => {
+    if (isCreating) return
+    
+    setIsCreating(true)
+    try {
+      const response = await fetch('/api/pages', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          title: 'Untitled',
+          workspaceId: workspaceId,
+          parentId: page.id
+        }),
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        const newPage = data.page || data
+        
+        // Expand the parent to show the new page
+        setExpanded(true)
+        
+        // Navigate to the new page
+        router.push(`/workspace/${workspaceId}/page/${newPage.id}`)
+        
+        // Refresh the sidebar
+        router.refresh()
+      }
+    } catch (error) {
+      console.error('Error creating sub-page:', error)
+      toast.error('Failed to create sub-page')
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
   return (
     <div>
       <div
@@ -392,7 +413,7 @@ function PageItem({
         <button
           onClick={(e) => {
             e.stopPropagation()
-            if (hasChildren) onToggleExpand()
+            if (hasChildren) setExpanded(!expanded)
           }}
           className={cn(
             "p-0.5 hover:bg-[#d5d5d4] dark:hover:bg-[#474747] rounded-sm",
@@ -418,8 +439,9 @@ function PageItem({
               className="h-5 w-5 hover:bg-[#d5d5d4] dark:hover:bg-[#474747]"
               onClick={(e) => {
                 e.stopPropagation()
-                onCreateSubpage()
+                handleCreateSubpage()
               }}
+              disabled={isCreating}
             >
               <Plus className="h-3 w-3" />
             </Button>
@@ -447,18 +469,16 @@ function PageItem({
       {hasChildren && expanded && (
         <div>
           {page.children.map((child: any) => (
-            <PageItem 
+            <RecursivePageItem
               key={child.id} 
               page={child} 
               workspaceId={workspaceId}
               level={level + 1}
-              expanded={false}
-              onToggleExpand={() => {}}
-              onCreateSubpage={() => {}}
             />
           ))}
         </div>
       )}
     </div>
   )
-}
\ No newline at end of file
+}
+
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..af6fdc4
--- /dev/null
+++ b/public/favicon.ico
@@ -0,0 +1 @@
+This is a placeholder for favicon.ico - browsers will use the icon.tsx generated favicon instead
\ No newline at end of file
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..c6f8ad3
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="4" fill="#000000"/>
+  <path d="M8 8h16v16h-16z" fill="#ffffff"/>
+  <path d="M11 11h10v2h-10z" fill="#000000"/>
+  <path d="M11 15h10v2h-10z" fill="#000000"/>
+  <path d="M11 19h6v2h-6z" fill="#000000"/>
+</svg>
\ No newline at end of file

From c702648bfce0c31362cbc311781ff57cabedb2c6 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 13:32:23 +0530
Subject: [PATCH 07/43] live page name updates in sidebar

---
 .../[workspaceId]/page/[pageId]/PageEditorV2.tsx     |  5 ++++-
 components/layout/notion-sidebar.tsx                 | 12 +++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
index 90044ed..366d19c 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
@@ -100,12 +100,15 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
       if (!response.ok) {
         throw new Error('Failed to save title')
       }
+      
+      // Refresh the router to update the sidebar
+      router.refresh()
     } catch (error) {
       console.error('Error saving title:', error)
       toast.error('Failed to save title')
       setTitle(page.title || '')
     }
-  }, [page.id, page.title])
+  }, [page.id, page.title, router])
 
   // Debounced title save
   useEffect(() => {
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index 2e01d97..a56442f 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -53,6 +53,7 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
   const [isLoading, setIsLoading] = useState(true)
   const [isCreatingPage, setIsCreatingPage] = useState(false)
   const [collapsed, setCollapsed] = useState(false)
+  const [refreshKey, setRefreshKey] = useState(0)
   // Fetch workspaces
   useEffect(() => {
     async function fetchWorkspaces() {
@@ -82,7 +83,7 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
     fetchWorkspaces()
   }, [pathname])
 
-  // Fetch pages
+  // Fetch pages - refetch when workspace or pathname changes
   useEffect(() => {
     async function fetchPages() {
       if (!currentWorkspace) {
@@ -106,7 +107,12 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
     }
 
     fetchPages()
-  }, [currentWorkspace])
+    
+    // Set up an interval to refresh pages every 2 seconds for real-time updates
+    const interval = setInterval(fetchPages, 2000)
+    
+    return () => clearInterval(interval)
+  }, [currentWorkspace, pathname, refreshKey])
 
   const handleWorkspaceChange = (workspace: Workspace) => {
     setCurrentWorkspace(workspace)
@@ -386,7 +392,7 @@ function RecursivePageItem({
         // Navigate to the new page
         router.push(`/workspace/${workspaceId}/page/${newPage.id}`)
         
-        // Refresh the sidebar
+        // Trigger a refresh
         router.refresh()
       }
     } catch (error) {

From ab38b79d958d379b14c4375f1cb3001ed1782afe Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 13:34:53 +0530
Subject: [PATCH 08/43] page sticky seletion

---
 components/layout/notion-sidebar.tsx | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index a56442f..6f41668 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -347,6 +347,17 @@ function SidebarItem({
   )
 }
 
+// Helper function to check if a page or any of its descendants is active
+function hasActiveDescendant(page: any, pathname: string, workspaceId: string): boolean {
+  if (pathname === `/workspace/${workspaceId}/page/${page.id}`) {
+    return true
+  }
+  if (page.children && page.children.length > 0) {
+    return page.children.some((child: any) => hasActiveDescendant(child, pathname, workspaceId))
+  }
+  return false
+}
+
 // Recursive page item component that manages its own expand state
 function RecursivePageItem({ 
   page, 
@@ -359,11 +370,19 @@ function RecursivePageItem({
 }) {
   const pathname = usePathname()
   const router = useRouter()
-  const [expanded, setExpanded] = useState(false)
-  const [isCreating, setIsCreating] = useState(false)
   const hasChildren = page.children && page.children.length > 0
   const isActive = pathname === `/workspace/${workspaceId}/page/${page.id}`
+  const hasActiveChild = hasChildren && hasActiveDescendant(page, pathname, workspaceId)
+  const [expanded, setExpanded] = useState(hasActiveChild)
+  const [isCreating, setIsCreating] = useState(false)
   const [showActions, setShowActions] = useState(false)
+  
+  // Auto-expand if a child becomes active
+  useEffect(() => {
+    if (hasActiveChild && !expanded) {
+      setExpanded(true)
+    }
+  }, [hasActiveChild, pathname, expanded])
 
   const handleCreateSubpage = async () => {
     if (isCreating) return
@@ -407,9 +426,9 @@ function RecursivePageItem({
     <div>
       <div
         className={cn(
-          "group flex items-center gap-1 px-2 py-0.5 rounded-sm cursor-pointer",
+          "group flex items-center gap-1 px-2 py-0.5 rounded-sm cursor-pointer transition-colors",
           "hover:bg-[#e5e5e4] dark:hover:bg-[#373737]",
-          isActive && "bg-[#e5e5e4] dark:bg-[#373737]"
+          isActive && "bg-[#e5e5e4] dark:bg-[#373737] font-medium"
         )}
         style={{ paddingLeft: `${level * 16 + 8}px` }}
         onMouseEnter={() => setShowActions(true)}

From 3ac3b004e6a2e79bd37ace495c0c7c29982370f6 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 13:36:33 +0530
Subject: [PATCH 09/43] remove new page

---
 components/layout/notion-sidebar.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index 6f41668..88816b5 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -292,15 +292,6 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
           </div>
         </ScrollArea>
 
-        {/* Bottom Actions */}
-        <div className="p-2 border-t border-[#e5e5e4] dark:border-[#373737]">
-          <SidebarItem 
-            icon={<Plus />} 
-            label="New page" 
-            onClick={() => handleCreatePage()}
-            disabled={isCreatingPage}
-          />
-        </div>
       </div>
 
       {showCreateModal && (

From 3c2f39dff74a695fc77dfd50a273824ade2297b6 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 13:42:52 +0530
Subject: [PATCH 10/43] fix search

---
 components/layout/notion-sidebar.tsx | 40 ++++++++++++++++++++++++++--
 components/search/SearchDialog.tsx   |  3 ++-
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index 88816b5..988afc4 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -30,6 +30,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { signOut } from "next-auth/react"
 import { CreateWorkspaceModal } from "@/components/workspace/create-workspace-modal"
+import { SearchDialog } from "@/components/search/SearchDialog"
 import { cn } from "@/lib/utils"
 import toast from "react-hot-toast"
 
@@ -49,11 +50,27 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
   const [workspaces, setWorkspaces] = useState<Workspace[]>([])
   const [currentWorkspace, setCurrentWorkspace] = useState<Workspace | null>(null)
   const [showCreateModal, setShowCreateModal] = useState(false)
+  const [showSearchDialog, setShowSearchDialog] = useState(false)
   const [pages, setPages] = useState<any[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [isCreatingPage, setIsCreatingPage] = useState(false)
   const [collapsed, setCollapsed] = useState(false)
   const [refreshKey, setRefreshKey] = useState(0)
+  
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Cmd/Ctrl + K for search
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setShowSearchDialog(true)
+      }
+    }
+    
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [])
+  
   // Fetch workspaces
   useEffect(() => {
     async function fetchWorkspaces() {
@@ -237,7 +254,18 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
 
         {/* Quick Actions */}
         <div className="p-2 space-y-0.5">
-          <SidebarItem icon={<Search />} label="Search" onClick={() => {}} />
+          <SidebarItem 
+            icon={<Search />} 
+            label={
+              <span className="flex items-center justify-between w-full">
+                <span>Search</span>
+                <kbd className="ml-auto text-[10px] px-1.5 py-0.5 rounded bg-[#37352f0a] dark:bg-[#ffffff0a] font-mono">
+                  ⌘K
+                </kbd>
+              </span>
+            }
+            onClick={() => setShowSearchDialog(true)} 
+          />
           <SidebarItem icon={<Settings />} label="Settings" onClick={() => {}} />
           <SidebarItem 
             icon={<Plus />} 
@@ -304,6 +332,14 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
           }}
         />
       )}
+      
+      {showSearchDialog && currentWorkspace && (
+        <SearchDialog
+          open={showSearchDialog}
+          onOpenChange={setShowSearchDialog}
+          workspaceId={currentWorkspace.id}
+        />
+      )}
     </>
   )
 }
@@ -316,7 +352,7 @@ function SidebarItem({
   disabled = false 
 }: { 
   icon: React.ReactNode
-  label: string
+  label: React.ReactNode
   onClick: () => void
   active?: boolean
   disabled?: boolean
diff --git a/components/search/SearchDialog.tsx b/components/search/SearchDialog.tsx
index 028af66..db6412e 100644
--- a/components/search/SearchDialog.tsx
+++ b/components/search/SearchDialog.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { useRouter } from 'next/navigation'
 import { Search, FileText, Clock, Star, ArrowRight, Loader2 } from 'lucide-react'
-import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '@/components/ui/command'
 import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
@@ -148,6 +148,7 @@ export function SearchDialog({ open, onOpenChange, workspaceId }: SearchDialogPr
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="p-0 max-w-2xl">
+        <DialogTitle className="sr-only">Search</DialogTitle>
         <Command shouldFilter={false}>
           <div className="flex items-center border-b px-3">
             <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />

From e057b1da4d1ed10741c07fab48bfb89c975595ed Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 14:10:43 +0530
Subject: [PATCH 11/43] fixed sidebar page width

---
 components/layout/notion-sidebar.tsx | 60 +++++++++++++++++-----------
 1 file changed, 37 insertions(+), 23 deletions(-)

diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index 988afc4..b7e93a7 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -450,41 +450,55 @@ function RecursivePageItem({
   }
 
   return (
-    <div>
+    <div className="w-full overflow-hidden">
       <div
         className={cn(
-          "group flex items-center gap-1 px-2 py-0.5 rounded-sm cursor-pointer transition-colors",
+          "group flex items-center gap-1 py-0.5 rounded-sm cursor-pointer transition-colors relative w-full overflow-hidden",
           "hover:bg-[#e5e5e4] dark:hover:bg-[#373737]",
           isActive && "bg-[#e5e5e4] dark:bg-[#373737] font-medium"
         )}
-        style={{ paddingLeft: `${level * 16 + 8}px` }}
+        style={{ 
+          paddingLeft: `${level * 16 + 8}px`, 
+          paddingRight: '8px'
+        }}
         onMouseEnter={() => setShowActions(true)}
         onMouseLeave={() => setShowActions(false)}
         onClick={() => router.push(`/workspace/${workspaceId}/page/${page.id}`)}
       >
-        <button
-          onClick={(e) => {
-            e.stopPropagation()
-            if (hasChildren) setExpanded(!expanded)
-          }}
-          className={cn(
-            "p-0.5 hover:bg-[#d5d5d4] dark:hover:bg-[#474747] rounded-sm",
-            !hasChildren && "invisible"
-          )}
-        >
-          <ChevronRight 
+        {/* Chevron */}
+        <div className="flex-shrink-0">
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              if (hasChildren) setExpanded(!expanded)
+            }}
             className={cn(
-              "h-3 w-3 transition-transform",
-              expanded && "rotate-90"
+              "p-0.5 hover:bg-[#d5d5d4] dark:hover:bg-[#474747] rounded-sm",
+              !hasChildren && "invisible"
             )}
-          />
-        </button>
+          >
+            <ChevronRight 
+              className={cn(
+                "h-3 w-3 transition-transform",
+                expanded && "rotate-90"
+              )}
+            />
+          </button>
+        </div>
+        
+        {/* Icon */}
+        <div className="flex-shrink-0 mr-1.5">
+          {page.icon || <FileText className="h-4 w-4 opacity-50" />}
+        </div>
         
-        <span className="mr-1.5">{page.icon || <FileText className="h-4 w-4 opacity-50" />}</span>
-        <span className="flex-1 truncate text-[13px]">{page.title || "Untitled"}</span>
+        {/* Title */}
+        <div className="min-w-0 flex-1 overflow-hidden w-[10px]">
+          <span className="block truncate text-[13px]">{page.title || "Untitled"}</span>
+        </div>
         
+        {/* Actions */}
         {showActions && (
-          <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100">
+          <div className="flex-shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 ml-1">
             <Button
               variant="ghost"
               size="icon"
@@ -508,7 +522,7 @@ function RecursivePageItem({
                   <MoreHorizontal className="h-3 w-3" />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="start">
+              <DropdownMenuContent align="end" sideOffset={5}>
                 <DropdownMenuItem>Delete</DropdownMenuItem>
                 <DropdownMenuItem>Duplicate</DropdownMenuItem>
                 <DropdownMenuItem>Move to</DropdownMenuItem>
@@ -519,7 +533,7 @@ function RecursivePageItem({
       </div>
       
       {hasChildren && expanded && (
-        <div>
+        <div className="w-full">
           {page.children.map((child: any) => (
             <RecursivePageItem
               key={child.id} 

From fe36e9fd1615599d664b05464d83362784d8282d Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 14:27:40 +0530
Subject: [PATCH 12/43] fixed pages deletion

---
 app/api/pages/[pageId]/route.ts      | 44 ++++++++++++++++----
 components/layout/notion-sidebar.tsx | 60 +++++++++++++++++++---------
 2 files changed, 78 insertions(+), 26 deletions(-)

diff --git a/app/api/pages/[pageId]/route.ts b/app/api/pages/[pageId]/route.ts
index f85f1b4..46cb45d 100644
--- a/app/api/pages/[pageId]/route.ts
+++ b/app/api/pages/[pageId]/route.ts
@@ -205,14 +205,44 @@ export async function DELETE(
       return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
     }
 
-    // Soft delete the page in PostgreSQL
-    await prisma.page.update({
-      where: { id: pageId },
-      data: {
-        isDeleted: true,
-        deletedAt: new Date(),
-        updatedAt: new Date()
+    // Get all descendant pages (recursive)
+    const getAllDescendants = async (parentId: string): Promise<string[]> => {
+      const children = await prisma.page.findMany({
+        where: {
+          parentId: parentId,
+          isDeleted: false
+        },
+        select: { id: true }
+      })
+      
+      let allDescendants = children.map(c => c.id)
+      
+      for (const child of children) {
+        const childDescendants = await getAllDescendants(child.id)
+        allDescendants = [...allDescendants, ...childDescendants]
       }
+      
+      return allDescendants
+    }
+    
+    // Get all pages to delete (current page + all descendants)
+    const descendantIds = await getAllDescendants(pageId)
+    const allPageIds = [pageId, ...descendantIds]
+    
+    // Soft delete all pages (parent and descendants) in a transaction
+    await prisma.$transaction(async (tx) => {
+      await tx.page.updateMany({
+        where: {
+          id: {
+            in: allPageIds
+          }
+        },
+        data: {
+          isDeleted: true,
+          deletedAt: new Date(),
+          updatedAt: new Date()
+        }
+      })
     })
 
     // Optionally delete content from MongoDB
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index b7e93a7..c049507 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import React, { useState, useEffect } from "react"
+import {Trash2} from "lucide-react"
 import Link from "next/link"
 import { usePathname, useRouter } from "next/navigation"
 import { User } from "@prisma/client"
@@ -13,8 +14,7 @@ import {
   Search,
   Settings,
   ChevronsLeft,
-  MoreHorizontal,
-  Trash2,
+  Trash,
   FileText,
   Hash,
   Calendar,
@@ -449,6 +449,34 @@ function RecursivePageItem({
     }
   }
 
+  const handleDeletePage = async () => {
+    if (!confirm(`Are you sure you want to delete "${page.title}"?`)) {
+      return
+    }
+
+    try {
+      const response = await fetch(`/api/pages/${page.id}`, {
+        method: 'DELETE',
+      })
+
+      if (response.ok) {
+        toast.success('Page moved to trash')
+        
+        // Navigate to workspace if we're currently on the deleted page
+        if (pathname.includes(page.id)) {
+          router.push(`/workspace/${workspaceId}`)
+        } else {
+          router.refresh()
+        }
+      } else {
+        throw new Error('Failed to delete page')
+      }
+    } catch (error) {
+      console.error('Error deleting page:', error)
+      toast.error('Failed to delete page')
+    }
+  }
+
   return (
     <div className="w-full overflow-hidden">
       <div
@@ -511,23 +539,17 @@ function RecursivePageItem({
             >
               <Plus className="h-3 w-3" />
             </Button>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-5 w-5 hover:bg-[#d5d5d4] dark:hover:bg-[#474747]"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <MoreHorizontal className="h-3 w-3" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" sideOffset={5}>
-                <DropdownMenuItem>Delete</DropdownMenuItem>
-                <DropdownMenuItem>Duplicate</DropdownMenuItem>
-                <DropdownMenuItem>Move to</DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-5 w-5 hover:bg-[#d5d5d4] dark:hover:bg-[#474747]"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleDeletePage()
+              }}
+            >
+              <Trash className="h-3 w-3" />
+            </Button>
           </div>
         )}
       </div>

From 061d3e878de276f0b991bdb345e6522df31226cc Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 14:42:01 +0530
Subject: [PATCH 13/43] support for trash

---
 .../workspace/[workspaceId]/trash/page.tsx    | 153 ++++++++++++++++++
 app/api/pages/[pageId]/permanent/route.ts     |  87 ++++++++++
 app/api/pages/[pageId]/restore/route.ts       | 125 ++++++++++++++
 app/api/pages/trash/route.ts                  |  50 ++++++
 components/layout/notion-sidebar.tsx          |  15 +-
 5 files changed, 424 insertions(+), 6 deletions(-)
 create mode 100644 app/(protected)/workspace/[workspaceId]/trash/page.tsx
 create mode 100644 app/api/pages/[pageId]/permanent/route.ts
 create mode 100644 app/api/pages/[pageId]/restore/route.ts
 create mode 100644 app/api/pages/trash/route.ts

diff --git a/app/(protected)/workspace/[workspaceId]/trash/page.tsx b/app/(protected)/workspace/[workspaceId]/trash/page.tsx
new file mode 100644
index 0000000..86b1e64
--- /dev/null
+++ b/app/(protected)/workspace/[workspaceId]/trash/page.tsx
@@ -0,0 +1,153 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { Trash2, RotateCcw, FileText } from 'lucide-react'
+import toast from 'react-hot-toast'
+import { formatDistanceToNow } from 'date-fns'
+
+interface DeletedPage {
+  id: string
+  title: string
+  icon?: string | null
+  deletedAt: string
+  parentId?: string | null
+  path: string[]
+}
+
+export default function TrashPage() {
+  const params = useParams()
+  const router = useRouter()
+  const workspaceId = params.workspaceId as string
+  const [deletedPages, setDeletedPages] = useState<DeletedPage[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    fetchDeletedPages()
+  }, [workspaceId])
+
+  const fetchDeletedPages = async () => {
+    try {
+      const response = await fetch(`/api/pages/trash?workspaceId=${workspaceId}`)
+      if (response.ok) {
+        const data = await response.json()
+        setDeletedPages(data)
+      }
+    } catch (error) {
+      console.error('Failed to fetch deleted pages:', error)
+      toast.error('Failed to load trash')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleRestore = async (pageId: string, pageTitle: string) => {
+    try {
+      const response = await fetch(`/api/pages/${pageId}/restore`, {
+        method: 'POST'
+      })
+
+      if (response.ok) {
+        toast.success(`"${pageTitle}" restored successfully`)
+        fetchDeletedPages() // Refresh the list
+        router.refresh() // Refresh sidebar
+      } else {
+        throw new Error('Failed to restore page')
+      }
+    } catch (error) {
+      console.error('Error restoring page:', error)
+      toast.error('Failed to restore page')
+    }
+  }
+
+  const handlePermanentDelete = async (pageId: string, pageTitle: string) => {
+    if (!confirm(`Are you sure you want to permanently delete "${pageTitle}"? This action cannot be undone.`)) {
+      return
+    }
+
+    try {
+      const response = await fetch(`/api/pages/${pageId}/permanent`, {
+        method: 'DELETE'
+      })
+
+      if (response.ok) {
+        toast.success(`"${pageTitle}" permanently deleted`)
+        fetchDeletedPages() // Refresh the list
+      } else {
+        throw new Error('Failed to delete page permanently')
+      }
+    } catch (error) {
+      console.error('Error permanently deleting page:', error)
+      toast.error('Failed to delete page permanently')
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto p-8">
+      <div className="mb-8">
+        <div className="flex items-center gap-2 mb-2">
+          <Trash2 className="h-8 w-8" />
+          <h1 className="text-3xl font-bold">Trash</h1>
+        </div>
+        <p className="text-gray-600 dark:text-gray-400">
+          Pages in trash will be permanently deleted after 30 days
+        </p>
+      </div>
+
+      {deletedPages.length === 0 ? (
+        <div className="text-center py-12">
+          <Trash2 className="h-16 w-16 mx-auto text-gray-400 mb-4" />
+          <p className="text-gray-600 dark:text-gray-400">Trash is empty</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {deletedPages.map((page) => (
+            <div
+              key={page.id}
+              className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 group"
+            >
+              <div className="flex items-center gap-3 flex-1 min-w-0">
+                <span className="text-xl">{page.icon || <FileText className="h-5 w-5 text-gray-400" />}</span>
+                <div className="flex-1 min-w-0">
+                  <p className="font-medium truncate">{page.title}</p>
+                  <p className="text-sm text-gray-500">
+                    Deleted {formatDistanceToNow(new Date(page.deletedAt))} ago
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleRestore(page.id, page.title)}
+                  className="hover:bg-blue-100 dark:hover:bg-blue-900"
+                >
+                  <RotateCcw className="h-4 w-4 mr-1" />
+                  Restore
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handlePermanentDelete(page.id, page.title)}
+                  className="hover:bg-red-100 dark:hover:bg-red-900 text-red-600 dark:text-red-400"
+                >
+                  <Trash2 className="h-4 w-4 mr-1" />
+                  Delete Forever
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/api/pages/[pageId]/permanent/route.ts b/app/api/pages/[pageId]/permanent/route.ts
new file mode 100644
index 0000000..d84d2a3
--- /dev/null
+++ b/app/api/pages/[pageId]/permanent/route.ts
@@ -0,0 +1,87 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth-config'
+import { prisma } from '@/lib/db/prisma'
+import { getMongoDb } from '@/lib/db/mongodb'
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ pageId: string }> }
+) {
+  try {
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { pageId } = await params
+
+    // Check if page exists in trash and user has access
+    const page = await prisma.page.findFirst({
+      where: {
+        id: pageId,
+        isDeleted: true,
+        authorId: user.id
+      }
+    })
+
+    if (!page) {
+      return NextResponse.json({ error: 'Page not found in trash' }, { status: 404 })
+    }
+
+    // Get all descendant pages (recursive)
+    const getAllDescendants = async (parentId: string): Promise<string[]> => {
+      const children = await prisma.page.findMany({
+        where: {
+          parentId: parentId
+        },
+        select: { id: true }
+      })
+      
+      let allDescendants = children.map(c => c.id)
+      
+      for (const child of children) {
+        const childDescendants = await getAllDescendants(child.id)
+        allDescendants = [...allDescendants, ...childDescendants]
+      }
+      
+      return allDescendants
+    }
+    
+    // Get all pages to delete permanently (current page + all descendants)
+    const descendantIds = await getAllDescendants(pageId)
+    const allPageIds = [pageId, ...descendantIds]
+    
+    // Delete from PostgreSQL
+    await prisma.$transaction(async (tx) => {
+      await tx.page.deleteMany({
+        where: {
+          id: {
+            in: allPageIds
+          }
+        }
+      })
+    })
+
+    // Delete content from MongoDB
+    try {
+      const db = await getMongoDb()
+      await db.collection('pageContents').deleteMany({
+        pageId: { $in: allPageIds }
+      })
+    } catch (mongoError) {
+      console.error('Error deleting from MongoDB:', mongoError)
+      // Continue even if MongoDB deletion fails
+    }
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error permanently deleting page:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/api/pages/[pageId]/restore/route.ts b/app/api/pages/[pageId]/restore/route.ts
new file mode 100644
index 0000000..627392a
--- /dev/null
+++ b/app/api/pages/[pageId]/restore/route.ts
@@ -0,0 +1,125 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth-config'
+import { prisma } from '@/lib/db/prisma'
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ pageId: string }> }
+) {
+  try {
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { pageId } = await params
+
+    // Check if page exists and user has access
+    const page = await prisma.page.findFirst({
+      where: {
+        id: pageId,
+        isDeleted: true,
+        authorId: user.id
+      },
+      select: {
+        id: true,
+        parentId: true
+      }
+    })
+
+    if (!page) {
+      return NextResponse.json({ error: 'Page not found in trash' }, { status: 404 })
+    }
+
+    // Check if parent page exists and is not deleted
+    if (page.parentId) {
+      const parentPage = await prisma.page.findFirst({
+        where: {
+          id: page.parentId,
+          isDeleted: false
+        }
+      })
+
+      if (!parentPage) {
+        // If parent is deleted or doesn't exist, restore to root level
+        await prisma.page.update({
+          where: { id: pageId },
+          data: {
+            isDeleted: false,
+            deletedAt: null,
+            parentId: null,
+            updatedAt: new Date()
+          }
+        })
+      } else {
+        // Restore with original parent
+        await prisma.page.update({
+          where: { id: pageId },
+          data: {
+            isDeleted: false,
+            deletedAt: null,
+            updatedAt: new Date()
+          }
+        })
+      }
+    } else {
+      // Restore root level page
+      await prisma.page.update({
+        where: { id: pageId },
+        data: {
+          isDeleted: false,
+          deletedAt: null,
+          updatedAt: new Date()
+        }
+      })
+    }
+
+    // Also restore all descendant pages
+    const getAllDescendants = async (parentId: string): Promise<string[]> => {
+      const children = await prisma.page.findMany({
+        where: {
+          parentId: parentId,
+          isDeleted: true
+        },
+        select: { id: true }
+      })
+      
+      let allDescendants = children.map(c => c.id)
+      
+      for (const child of children) {
+        const childDescendants = await getAllDescendants(child.id)
+        allDescendants = [...allDescendants, ...childDescendants]
+      }
+      
+      return allDescendants
+    }
+    
+    const descendantIds = await getAllDescendants(pageId)
+    
+    if (descendantIds.length > 0) {
+      await prisma.page.updateMany({
+        where: {
+          id: {
+            in: descendantIds
+          }
+        },
+        data: {
+          isDeleted: false,
+          deletedAt: null,
+          updatedAt: new Date()
+        }
+      })
+    }
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error restoring page:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/api/pages/trash/route.ts b/app/api/pages/trash/route.ts
new file mode 100644
index 0000000..02241c6
--- /dev/null
+++ b/app/api/pages/trash/route.ts
@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth-config'
+import { prisma } from '@/lib/db/prisma'
+
+export async function GET(request: NextRequest) {
+  try {
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const searchParams = request.nextUrl.searchParams
+    const workspaceId = searchParams.get('workspaceId')
+
+    if (!workspaceId) {
+      return NextResponse.json({ error: 'Workspace ID required' }, { status: 400 })
+    }
+
+    // Fetch all deleted pages for this workspace
+    const deletedPages = await prisma.page.findMany({
+      where: {
+        workspaceId,
+        isDeleted: true,
+        authorId: user.id // Only show pages deleted by the current user
+      },
+      select: {
+        id: true,
+        title: true,
+        icon: true,
+        deletedAt: true,
+        parentId: true,
+        path: true
+      },
+      orderBy: {
+        deletedAt: 'desc'
+      }
+    })
+
+    return NextResponse.json(deletedPages)
+  } catch (error) {
+    console.error('Error fetching deleted pages:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index c049507..ddd0a08 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import React, { useState, useEffect } from "react"
-import {Trash2} from "lucide-react"
+
 import Link from "next/link"
 import { usePathname, useRouter } from "next/navigation"
 import { User } from "@prisma/client"
@@ -15,6 +15,7 @@ import {
   Settings,
   ChevronsLeft,
   Trash,
+  Trash2,
   FileText,
   Hash,
   Calendar,
@@ -279,6 +280,11 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
         <ScrollArea className="flex-1 px-2">
           <div className="space-y-0.5 pb-2">
             <SidebarItem icon={<Inbox />} label="Inbox" onClick={() => {}} />
+            <SidebarItem 
+              icon={<Trash2 />} 
+              label="Trash" 
+              onClick={() => router.push(`/workspace/${currentWorkspace?.id}/trash`)}
+            />
             
             <div className="pt-3 pb-1">
               <div className="flex items-center justify-between px-2 py-1">
@@ -314,9 +320,6 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
               </div>
             )}
 
-            <div className="pt-3">
-              <SidebarItem icon={<Trash2 />} label="Trash" onClick={() => {}} />
-            </div>
           </div>
         </ScrollArea>
 
@@ -450,7 +453,7 @@ function RecursivePageItem({
   }
 
   const handleDeletePage = async () => {
-    if (!confirm(`Are you sure you want to delete "${page.title}"?`)) {
+    if (!confirm(`Move "${page.title}" to trash? You can restore it later from the trash.`)) {
       return
     }
 
@@ -473,7 +476,7 @@ function RecursivePageItem({
       }
     } catch (error) {
       console.error('Error deleting page:', error)
-      toast.error('Failed to delete page')
+      toast.error('Failed to move page to trash')
     }
   }
 

From 99f80a8b550947790dba32e6026b0892683bde56 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 15:11:50 +0530
Subject: [PATCH 14/43] add support for fav

---
 .../page/[pageId]/PageEditorV2.tsx            |   1 +
 app/api/pages/[pageId]/favorite/route.ts      | 111 ++++++++----------
 components/layout/notion-sidebar.tsx          |  95 ++++++++++++++-
 components/page/notion-page-header.tsx        |  35 +++++-
 lib/services/pages.ts                         |   2 +-
 .../migration.sql                             |   2 +
 prisma/schema.prisma                          |   1 +
 types/index.ts                                |   1 +
 8 files changed, 180 insertions(+), 68 deletions(-)
 create mode 100644 prisma/migrations/20250824091905_add_favorite_field/migration.sql

diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
index 366d19c..0a18789 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
@@ -28,6 +28,7 @@ interface PageData {
   coverImage?: string
   isPublished: boolean
   isArchived: boolean
+  isFavorite?: boolean
   path: string
   workspaceId: string
   authorId: string
diff --git a/app/api/pages/[pageId]/favorite/route.ts b/app/api/pages/[pageId]/favorite/route.ts
index c4497cf..e36630a 100644
--- a/app/api/pages/[pageId]/favorite/route.ts
+++ b/app/api/pages/[pageId]/favorite/route.ts
@@ -1,26 +1,27 @@
-import { NextResponse } from 'next/server'
-import { getCurrentUser } from '@/lib/auth'
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth-config'
 import { prisma } from '@/lib/db/prisma'
 
-// For now, we'll store favorites as a simple JSON field in user preferences
-// In a production app, you might want a separate UserPageFavorites table
-
-export async function PUT(
-  request: Request,
+export async function POST(
+  request: NextRequest,
   { params }: { params: Promise<{ pageId: string }> }
 ) {
   try {
-    const user = await getCurrentUser()
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
     if (!user) {
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
     const { pageId } = await params
 
-    // Verify the page exists and user has access
+    // Check if page exists and user has access
     const page = await prisma.page.findFirst({
       where: {
         id: pageId,
+        isDeleted: false,
         workspace: {
           members: {
             some: {
@@ -28,6 +29,11 @@ export async function PUT(
             }
           }
         }
+      },
+      select: {
+        id: true,
+        isFavorite: true,
+        authorId: true
       }
     })
 
@@ -35,53 +41,19 @@ export async function PUT(
       return NextResponse.json({ error: 'Page not found' }, { status: 404 })
     }
 
-    // For now, we'll use a simple approach with user metadata
-    // Get current user's favorite pages (stored in a JSON field we'll add)
-    const currentUser = await prisma.user.findUnique({
-      where: { id: user.id }
-    })
-
-    if (!currentUser) {
-      return NextResponse.json({ error: 'User not found' }, { status: 404 })
-    }
-
-    // Since we don't have a preferences field in the schema, let's add a simple activity log
-    // This is a temporary solution - in production you'd want a proper favorites system
-    
-    // Check if already favorited by looking for recent activity
-    const existingFavorite = await prisma.activity.findFirst({
-      where: {
-        userId: user.id,
-        pageId: pageId,
-        type: 'PAGE_FAVORITED' as any, // This enum doesn't exist in schema
-        createdAt: {
-          gte: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) // Last 30 days
-        }
+    // Toggle favorite status
+    const updatedPage = await prisma.page.update({
+      where: { id: pageId },
+      data: {
+        isFavorite: !page.isFavorite,
+        updatedAt: new Date()
       }
     })
 
-    if (existingFavorite) {
-      // Remove from favorites (delete the activity)
-      await prisma.activity.delete({
-        where: { id: existingFavorite.id }
-      })
-      
-      return NextResponse.json({ 
-        success: true, 
-        isFavorite: false,
-        message: 'Removed from favorites' 
-      })
-    } else {
-      // Add to favorites - for now, just return success
-      // In a real implementation, you'd create a proper activity or preference record
-      
-      return NextResponse.json({ 
-        success: true, 
-        isFavorite: true,
-        message: 'Added to favorites' 
-      })
-    }
-
+    return NextResponse.json({ 
+      success: true, 
+      isFavorite: updatedPage.isFavorite 
+    })
   } catch (error) {
     console.error('Error toggling favorite:', error)
     return NextResponse.json(
@@ -92,33 +64,44 @@ export async function PUT(
 }
 
 export async function GET(
-  request: Request,
+  request: NextRequest,
   { params }: { params: Promise<{ pageId: string }> }
 ) {
   try {
-    const user = await getCurrentUser()
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
     if (!user) {
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
     const { pageId } = await params
 
-    // Check if page is favorited
-    const favorite = await prisma.activity.findFirst({
+    // Get favorite status
+    const page = await prisma.page.findFirst({
       where: {
-        userId: user.id,
-        pageId: pageId,
-        type: 'PAGE_FAVORITED' as any,
-        createdAt: {
-          gte: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
+        id: pageId,
+        isDeleted: false,
+        workspace: {
+          members: {
+            some: {
+              userId: user.id
+            }
+          }
         }
+      },
+      select: {
+        isFavorite: true
       }
     })
 
+    if (!page) {
+      return NextResponse.json({ error: 'Page not found' }, { status: 404 })
+    }
+
     return NextResponse.json({ 
-      isFavorite: !!favorite 
+      isFavorite: page.isFavorite 
     })
-
   } catch (error) {
     console.error('Error checking favorite status:', error)
     return NextResponse.json(
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index ddd0a08..5645524 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -16,6 +16,7 @@ import {
   ChevronsLeft,
   Trash,
   Trash2,
+  Star,
   FileText,
   Hash,
   Calendar,
@@ -53,6 +54,7 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
   const [showCreateModal, setShowCreateModal] = useState(false)
   const [showSearchDialog, setShowSearchDialog] = useState(false)
   const [pages, setPages] = useState<any[]>([])
+  const [favoritePages, setFavoritePages] = useState<any[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [isCreatingPage, setIsCreatingPage] = useState(false)
   const [collapsed, setCollapsed] = useState(false)
@@ -114,13 +116,32 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
         if (response.ok) {
           const data = await response.json()
           const pageTree = data.tree || data
-          setPages(Array.isArray(pageTree) ? pageTree : [])
+          const allPages = Array.isArray(pageTree) ? pageTree : []
+          
+          // Separate favorite pages
+          const extractFavorites = (pages: any[]): any[] => {
+            let favorites: any[] = []
+            pages.forEach(page => {
+              if (page.isFavorite) {
+                favorites.push(page)
+              }
+              if (page.children) {
+                favorites = [...favorites, ...extractFavorites(page.children)]
+              }
+            })
+            return favorites
+          }
+          
+          setPages(allPages)
+          setFavoritePages(extractFavorites(allPages))
         } else {
           setPages([])
+          setFavoritePages([])
         }
       } catch (error) {
         console.error('Failed to fetch pages:', error)
         setPages([])
+        setFavoritePages([])
       }
     }
 
@@ -286,6 +307,41 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
               onClick={() => router.push(`/workspace/${currentWorkspace?.id}/trash`)}
             />
             
+            {/* Favorites Section */}
+            <div className="pt-3 pb-1">
+              <div className="flex items-center justify-between px-2 py-1">
+                <span className="text-xs font-medium text-[#787774] dark:text-[#979797]">
+                  Favorites
+                </span>
+              </div>
+            </div>
+            
+            {favoritePages.length === 0 ? (
+              <div className="px-2 py-2 text-xs text-[#787774] dark:text-[#979797]">
+                No favorites yet
+              </div>
+            ) : (
+              <div className="space-y-0">
+                {favoritePages.map((page) => (
+                  <div key={`fav-${page.id}`}>
+                    <Link href={`/workspace/${currentWorkspace?.id}/page/${page.id}`}>
+                      <div
+                        className={cn(
+                          "group flex items-center gap-1 py-0.5 px-2 rounded-sm cursor-pointer transition-colors",
+                          "hover:bg-[#e5e5e4] dark:hover:bg-[#373737]",
+                          pathname === `/workspace/${currentWorkspace?.id}/page/${page.id}` && "bg-[#e5e5e4] dark:bg-[#373737] font-medium"
+                        )}
+                      >
+                        <Star className="h-3 w-3 fill-yellow-500 text-yellow-500 mr-1" />
+                        <span className="text-base mr-1">{page.icon || '📄'}</span>
+                        <span className="text-[13px] truncate">{page.title || 'Untitled'}</span>
+                      </div>
+                    </Link>
+                  </div>
+                ))}
+              </div>
+            )}
+            
             <div className="pt-3 pb-1">
               <div className="flex items-center justify-between px-2 py-1">
                 <span className="text-xs font-medium text-[#787774] dark:text-[#979797]">
@@ -406,6 +462,7 @@ function RecursivePageItem({
   const [expanded, setExpanded] = useState(hasActiveChild)
   const [isCreating, setIsCreating] = useState(false)
   const [showActions, setShowActions] = useState(false)
+  const [isFavorite, setIsFavorite] = useState(page.isFavorite || false)
   
   // Auto-expand if a child becomes active
   useEffect(() => {
@@ -480,6 +537,30 @@ function RecursivePageItem({
     }
   }
 
+  const handleToggleFavorite = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    try {
+      const response = await fetch(`/api/pages/${page.id}/favorite`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        setIsFavorite(data.isFavorite)
+        toast.success(data.isFavorite ? 'Added to favorites' : 'Removed from favorites')
+        router.refresh()
+      } else {
+        throw new Error('Failed to toggle favorite')
+      }
+    } catch (error) {
+      console.error('Error toggling favorite:', error)
+      toast.error('Failed to update favorite')
+    }
+  }
+
   return (
     <div className="w-full overflow-hidden">
       <div
@@ -530,6 +611,18 @@ function RecursivePageItem({
         {/* Actions */}
         {showActions && (
           <div className="flex-shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 ml-1">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-5 w-5 hover:bg-[#d5d5d4] dark:hover:bg-[#474747]"
+              onClick={handleToggleFavorite}
+              title={isFavorite ? "Remove from favorites" : "Add to favorites"}
+            >
+              <Star className={cn(
+                "h-3 w-3",
+                isFavorite && "fill-yellow-500 text-yellow-500"
+              )} />
+            </Button>
             <Button
               variant="ghost"
               size="icon"
diff --git a/components/page/notion-page-header.tsx b/components/page/notion-page-header.tsx
index 1c2e566..68e1669 100644
--- a/components/page/notion-page-header.tsx
+++ b/components/page/notion-page-header.tsx
@@ -57,6 +57,7 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
   const [isUpdating, setIsUpdating] = useState(false)
   const [hoveredAddIcon, setHoveredAddIcon] = useState(false)
   const [hoveredAddCover, setHoveredAddCover] = useState(false)
+  const [isFavorite, setIsFavorite] = useState(page.isFavorite || false)
 
   const handleDelete = async () => {
     setIsDeleting(true)
@@ -81,6 +82,29 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
     }
   }
 
+  const handleToggleFavorite = async () => {
+    try {
+      const response = await fetch(`/api/pages/${page.id}/favorite`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        }
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        setIsFavorite(data.isFavorite)
+        toast.success(data.isFavorite ? "Added to favorites" : "Removed from favorites")
+        router.refresh()
+      } else {
+        toast.error("Failed to update favorite")
+      }
+    } catch (error) {
+      console.error("Error toggling favorite:", error)
+      toast.error("Failed to update favorite")
+    }
+  }
+
   const updatePageIcon = async (newIcon: string) => {
     setIsUpdating(true)
     try {
@@ -265,8 +289,15 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
             <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
               <Clock className="h-4 w-4" />
             </button>
-            <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
-              <Star className="h-4 w-4" />
+            <button 
+              className="hover:bg-[#37352f0a] px-2 py-1 rounded"
+              onClick={handleToggleFavorite}
+              title={isFavorite ? "Remove from favorites" : "Add to favorites"}
+            >
+              <Star className={cn(
+                "h-4 w-4",
+                isFavorite && "fill-yellow-500 text-yellow-500"
+              )} />
             </button>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
diff --git a/lib/services/pages.ts b/lib/services/pages.ts
index c8a41d1..395a969 100644
--- a/lib/services/pages.ts
+++ b/lib/services/pages.ts
@@ -14,7 +14,7 @@ export function buildPageTree(pages: Page[]): PageTreeNode[] {
       children: [],
       depth: 0,
       hasChildren: false,
-      isFavorite: false // This should be set based on user preferences
+      isFavorite: page.isFavorite || false // Use the actual isFavorite value from the page
     })
   })
 
diff --git a/prisma/migrations/20250824091905_add_favorite_field/migration.sql b/prisma/migrations/20250824091905_add_favorite_field/migration.sql
new file mode 100644
index 0000000..9eb1e73
--- /dev/null
+++ b/prisma/migrations/20250824091905_add_favorite_field/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Page" ADD COLUMN     "isFavorite" BOOLEAN NOT NULL DEFAULT false;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 51879bb..5d489de 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -74,6 +74,7 @@ model Page {
   isPublished   Boolean   @default(false)
   isArchived    Boolean   @default(false)
   isDeleted     Boolean   @default(false)
+  isFavorite    Boolean   @default(false)
   path          String    // Hierarchical path for nested pages
   order         Int       @default(0)
   createdAt     DateTime  @default(now())
diff --git a/types/index.ts b/types/index.ts
index c60bb68..5e44c63 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -27,6 +27,7 @@ export interface Page {
   isPublished: boolean
   isArchived: boolean
   isDeleted: boolean
+  isFavorite: boolean
   path: string
   order: number
   workspaceId: string

From 665df719102cdb7417857e1ee48a0997889f54c6 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 15:19:31 +0530
Subject: [PATCH 15/43] fix action from dropdown

---
 components/layout/notion-sidebar.tsx | 96 +++++++++++++++++++++-------
 1 file changed, 72 insertions(+), 24 deletions(-)

diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index 5645524..363212f 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -14,9 +14,12 @@ import {
   Search,
   Settings,
   ChevronsLeft,
+  MoreHorizontal,
   Trash,
   Trash2,
   Star,
+  Copy,
+  ArrowRight,
   FileText,
   Hash,
   Calendar,
@@ -463,6 +466,7 @@ function RecursivePageItem({
   const [isCreating, setIsCreating] = useState(false)
   const [showActions, setShowActions] = useState(false)
   const [isFavorite, setIsFavorite] = useState(page.isFavorite || false)
+  const [dropdownOpen, setDropdownOpen] = useState(false)
   
   // Auto-expand if a child becomes active
   useEffect(() => {
@@ -610,19 +614,10 @@ function RecursivePageItem({
         
         {/* Actions */}
         {showActions && (
-          <div className="flex-shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 ml-1">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-5 w-5 hover:bg-[#d5d5d4] dark:hover:bg-[#474747]"
-              onClick={handleToggleFavorite}
-              title={isFavorite ? "Remove from favorites" : "Add to favorites"}
-            >
-              <Star className={cn(
-                "h-3 w-3",
-                isFavorite && "fill-yellow-500 text-yellow-500"
-              )} />
-            </Button>
+          <div className={cn(
+            "flex-shrink-0 flex items-center gap-0.5 ml-1 transition-opacity",
+            dropdownOpen ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+          )}>
             <Button
               variant="ghost"
               size="icon"
@@ -635,17 +630,70 @@ function RecursivePageItem({
             >
               <Plus className="h-3 w-3" />
             </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-5 w-5 hover:bg-[#d5d5d4] dark:hover:bg-[#474747]"
-              onClick={(e) => {
-                e.stopPropagation()
-                handleDeletePage()
-              }}
-            >
-              <Trash className="h-3 w-3" />
-            </Button>
+            <DropdownMenu modal={false} open={dropdownOpen} onOpenChange={setDropdownOpen}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-5 w-5 hover:bg-[#d5d5d4] dark:hover:bg-[#474747]"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <MoreHorizontal className="h-3 w-3" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent 
+                align="end" 
+                side="right" 
+                className="w-48 z-50"
+                onCloseAutoFocus={(e) => e.preventDefault()}
+              >
+                <DropdownMenuItem 
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleToggleFavorite(e)
+                    setDropdownOpen(false)
+                  }}
+                >
+                  <Star className={cn(
+                    "mr-2 h-3 w-3",
+                    isFavorite && "fill-yellow-500 text-yellow-500"
+                  )} />
+                  {isFavorite ? "Remove from favorites" : "Add to favorites"}
+                </DropdownMenuItem>
+                <DropdownMenuItem 
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    console.log('Duplicate clicked')
+                    setDropdownOpen(false)
+                  }}
+                >
+                  <Copy className="mr-2 h-3 w-3" />
+                  Duplicate
+                </DropdownMenuItem>
+                <DropdownMenuItem 
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    console.log('Move to clicked')
+                    setDropdownOpen(false)
+                  }}
+                >
+                  <ArrowRight className="mr-2 h-3 w-3" />
+                  Move to
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem 
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleDeletePage()
+                    setDropdownOpen(false)
+                  }}
+                  className="text-red-600 dark:text-red-400"
+                >
+                  <Trash className="mr-2 h-3 w-3" />
+                  Move to trash
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         )}
       </div>

From 49c41e5860e1b303d27d3adc05749b854fd3979b Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 15:22:05 +0530
Subject: [PATCH 16/43] dropdown width fix

---
 components/layout/notion-sidebar.tsx | 23 +++++++----------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index 363212f..6e03cd2 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -326,21 +326,12 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
             ) : (
               <div className="space-y-0">
                 {favoritePages.map((page) => (
-                  <div key={`fav-${page.id}`}>
-                    <Link href={`/workspace/${currentWorkspace?.id}/page/${page.id}`}>
-                      <div
-                        className={cn(
-                          "group flex items-center gap-1 py-0.5 px-2 rounded-sm cursor-pointer transition-colors",
-                          "hover:bg-[#e5e5e4] dark:hover:bg-[#373737]",
-                          pathname === `/workspace/${currentWorkspace?.id}/page/${page.id}` && "bg-[#e5e5e4] dark:bg-[#373737] font-medium"
-                        )}
-                      >
-                        <Star className="h-3 w-3 fill-yellow-500 text-yellow-500 mr-1" />
-                        <span className="text-base mr-1">{page.icon || '📄'}</span>
-                        <span className="text-[13px] truncate">{page.title || 'Untitled'}</span>
-                      </div>
-                    </Link>
-                  </div>
+                  <RecursivePageItem 
+                    key={`fav-${page.id}`}
+                    page={{...page, children: []}} // Don't show children in favorites
+                    workspaceId={currentWorkspace?.id || ''}
+                    level={0}
+                  />
                 ))}
               </div>
             )}
@@ -644,7 +635,7 @@ function RecursivePageItem({
               <DropdownMenuContent 
                 align="end" 
                 side="right" 
-                className="w-48 z-50"
+                className="w-56 z-50"
                 onCloseAutoFocus={(e) => e.preventDefault()}
               >
                 <DropdownMenuItem 

From 3a45e20c92efa2773d1dc8c4177806c27a4115fc Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 15:30:49 +0530
Subject: [PATCH 17/43] edited on status

---
 .../page/[pageId]/PageEditorV2.tsx            | 12 ++++-
 components/page/notion-page-header.tsx        | 48 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
index 0a18789..f2f0662 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
@@ -70,6 +70,7 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
   const [showCoverOptions, setShowCoverOptions] = useState(false)
   const [showIconPicker, setShowIconPicker] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
+  const [lastUpdated, setLastUpdated] = useState(page.updatedAt)
   const titleRef = useRef<HTMLTextAreaElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
@@ -102,6 +103,9 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
         throw new Error('Failed to save title')
       }
       
+      // Update the last updated timestamp
+      setLastUpdated(new Date().toISOString())
+      
       // Refresh the router to update the sidebar
       router.refresh()
     } catch (error) {
@@ -140,6 +144,9 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
       if (!response.ok) {
         throw new Error('Failed to save content')
       }
+      
+      // Update the last updated timestamp
+      setLastUpdated(new Date().toISOString())
     } catch (error) {
       console.error('Error saving content:', error)
       toast.error('Failed to save content')
@@ -195,6 +202,9 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
       if (!response.ok) {
         throw new Error('Failed to save page')
       }
+      
+      // Update the last updated timestamp
+      setLastUpdated(new Date().toISOString())
     } catch (error) {
       console.error('Error saving page:', error)
       toast.error('Failed to save changes')
@@ -256,7 +266,7 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
     <div className="min-h-screen bg-white dark:bg-[#191919]">
       {/* Notion-style Page Header */}
       <NotionPageHeader 
-        page={{...page, icon, coverImage}} 
+        page={{...page, icon, coverImage, updatedAt: lastUpdated}} 
         workspaceId={page.workspaceId}
         onUpdate={handleRefresh}
       />
diff --git a/components/page/notion-page-header.tsx b/components/page/notion-page-header.tsx
index 68e1669..d2a76b9 100644
--- a/components/page/notion-page-header.tsx
+++ b/components/page/notion-page-header.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useRef } from "react"
+import { useState, useRef, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { Button } from "@/components/ui/button"
 import {
@@ -58,6 +58,48 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
   const [hoveredAddIcon, setHoveredAddIcon] = useState(false)
   const [hoveredAddCover, setHoveredAddCover] = useState(false)
   const [isFavorite, setIsFavorite] = useState(page.isFavorite || false)
+  const [editedTime, setEditedTime] = useState("")
+
+  // Format the edited time
+  const formatEditedTime = (date: string | Date) => {
+    const editDate = new Date(date)
+    const now = new Date()
+    const diffMs = now.getTime() - editDate.getTime()
+    const diffMins = Math.floor(diffMs / 60000)
+    
+    if (diffMins < 1) return 'Just now'
+    if (diffMins < 60) return `${diffMins} minute${diffMins === 1 ? '' : 's'} ago`
+    
+    const diffHours = Math.floor(diffMins / 60)
+    if (diffHours < 24) return `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`
+    
+    const diffDays = Math.floor(diffHours / 24)
+    if (diffDays < 30) return `${diffDays} day${diffDays === 1 ? '' : 's'} ago`
+    
+    // Format as date for older edits
+    return editDate.toLocaleDateString('en-US', { 
+      month: 'short', 
+      day: 'numeric',
+      year: editDate.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
+    })
+  }
+
+  // Update edited time every 30 seconds for live updates
+  useEffect(() => {
+    const updateTime = () => {
+      if (page.updatedAt) {
+        setEditedTime(formatEditedTime(page.updatedAt))
+      }
+    }
+
+    // Set initial time
+    updateTime()
+
+    // Update every 30 seconds
+    const interval = setInterval(updateTime, 30000)
+
+    return () => clearInterval(interval)
+  }, [page.updatedAt])
 
   const handleDelete = async () => {
     setIsDeleting(true)
@@ -280,6 +322,10 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
 
           {/* Top Bar Actions */}
           <div className="flex items-center justify-end gap-2 py-2 text-sm text-[#37352f80]">
+            <div className="flex items-center gap-1 px-2 py-1">
+              <span className="text-[#37352f80]">Edited</span>
+              <span className="text-[#37352f99]">{editedTime}</span>
+            </div>
             <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
               Share
             </button>

From 650f85dbe7a24f4b014e8797d2cd2be10d70bff1 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 15:35:47 +0530
Subject: [PATCH 18/43] dashboard updated

---
 .../[workspaceId]/WorkspaceDashboard.tsx      | 354 +++++-------------
 .../workspace/[workspaceId]/page.tsx          |  59 +--
 2 files changed, 113 insertions(+), 300 deletions(-)

diff --git a/app/(protected)/workspace/[workspaceId]/WorkspaceDashboard.tsx b/app/(protected)/workspace/[workspaceId]/WorkspaceDashboard.tsx
index a714d42..9b6a5be 100644
--- a/app/(protected)/workspace/[workspaceId]/WorkspaceDashboard.tsx
+++ b/app/(protected)/workspace/[workspaceId]/WorkspaceDashboard.tsx
@@ -2,31 +2,20 @@
 
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { Plus, Users, FileText, Archive, Clock, Sparkles } from 'lucide-react'
-import { format } from 'date-fns'
+import { Plus, Clock } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Avatar } from '@/components/ui/avatar'
-import { Badge } from '@/components/ui/badge'
-import { Separator } from '@/components/ui/separator'
 import { NewPageDialog } from '@/components/pages/NewPageDialog'
-import { Workspace, Page, User } from '@/types'
+import Link from 'next/link'
 
 interface WorkspaceDashboardProps {
-  workspace: any // Extended workspace with members
-  recentPages: any[] // Extended pages with author
-  stats: {
-    totalPages: number
-    archivedPages: number
-    totalMembers: number
-  }
-  currentUser: User
+  workspace: any
+  recentPages: any[]
+  currentUser: any
 }
 
 export function WorkspaceDashboard({ 
   workspace, 
   recentPages, 
-  stats,
   currentUser 
 }: WorkspaceDashboardProps) {
   const [newPageOpen, setNewPageOpen] = useState(false)
@@ -36,263 +25,108 @@ export function WorkspaceDashboard({
     setNewPageOpen(true)
   }
 
-  const handlePageClick = (pageId: string) => {
-    router.push(`/workspace/${workspace.id}/page/${pageId}`)
-  }
-
   const getGreeting = () => {
     const hour = new Date().getHours()
-    if (hour < 12) return 'Good morning'
-    if (hour < 17) return 'Good afternoon'
-    return 'Good evening'
+    const name = currentUser.name?.split(' ')[0] || 'there'
+    
+    if (hour < 12) return `Good morning, ${name}`
+    if (hour < 17) return `Good afternoon, ${name}`
+    return `Good evening, ${name}`
   }
 
-  return (
-    <div className="flex-1 overflow-auto">
-      <div className="max-w-6xl mx-auto p-6">
-        {/* Header */}
-        <div className="mb-8">
-          <div className="flex items-center gap-3 mb-2">
-            {workspace.icon && (
-              <span className="text-4xl">{workspace.icon}</span>
-            )}
-            <div>
-              <h1 className="text-3xl font-bold">{workspace.name}</h1>
-              <p className="text-muted-foreground">
-                {getGreeting()}, {currentUser.name}
-              </p>
-            </div>
-          </div>
-          
-          <div className="flex items-center gap-4 mt-4">
-            <Button onClick={handleCreatePage} size="lg">
-              <Plus className="w-5 h-5 mr-2" />
-              New page
-            </Button>
-            <Button variant="outline" size="lg">
-              <Sparkles className="w-5 h-5 mr-2" />
-              AI Assistant
-            </Button>
-          </div>
-        </div>
-
-        {/* Stats Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Total Pages</CardTitle>
-              <FileText className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{stats.totalPages}</div>
-              <p className="text-xs text-muted-foreground">
-                {stats.archivedPages} archived
-              </p>
-            </CardContent>
-          </Card>
+  const formatTime = (date: Date | string) => {
+    const d = new Date(date)
+    const now = new Date()
+    const diffMs = now.getTime() - d.getTime()
+    const diffMins = Math.floor(diffMs / 60000)
+    
+    if (diffMins < 1) return 'Just now'
+    if (diffMins < 60) return `${diffMins}m ago`
+    
+    const diffHours = Math.floor(diffMins / 60)
+    if (diffHours < 24) return `${diffHours}h ago`
+    
+    const diffDays = Math.floor(diffHours / 24)
+    if (diffDays < 7) return `${diffDays}d ago`
+    
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+  }
 
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Team Members</CardTitle>
-              <Users className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{stats.totalMembers}</div>
-              <p className="text-xs text-muted-foreground">
-                Active collaborators
-              </p>
-            </CardContent>
-          </Card>
+  return (
+    <div className="flex-1 overflow-auto bg-white dark:bg-[#191919]">
+      <div className="max-w-3xl mx-auto px-8 py-12">
+        {/* Simple Greeting */}
+        <h1 className="text-2xl font-semibold mb-8 text-gray-900 dark:text-gray-100">
+          {getGreeting()}
+        </h1>
 
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Recent Activity</CardTitle>
-              <Clock className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{recentPages.length}</div>
-              <p className="text-xs text-muted-foreground">
-                Pages updated recently
-              </p>
-            </CardContent>
-          </Card>
+        {/* Quick Actions */}
+        <div className="mb-12">
+          <Button 
+            onClick={handleCreatePage}
+            variant="outline"
+            className="hover:bg-gray-50 dark:hover:bg-gray-800"
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            New page
+          </Button>
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Recent Pages */}
-          <div className="lg:col-span-2">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Clock className="w-5 h-5" />
-                  Recent Pages
-                </CardTitle>
-                <CardDescription>
-                  Pages you've worked on recently
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                {recentPages.length > 0 ? (
-                  <div className="space-y-3">
-                    {recentPages.map((page) => (
-                      <div
-                        key={page.id}
-                        className="flex items-center gap-3 p-3 rounded-lg border hover:bg-accent cursor-pointer transition-colors"
-                        onClick={() => handlePageClick(page.id)}
-                      >
-                        <span className="text-lg">{page.icon || '📄'}</span>
-                        <div className="flex-1 min-w-0">
-                          <div className="font-medium truncate">{page.title}</div>
-                          <div className="text-sm text-muted-foreground">
-                            Updated {format(new Date(page.updatedAt), 'MMM d, yyyy')}
-                            {page.author?.name && ` by ${page.author.name}`}
-                          </div>
-                        </div>
-                        {page.isPublished && (
-                          <Badge variant="secondary" className="text-xs">
-                            Published
-                          </Badge>
-                        )}
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <div className="text-center py-8">
-                    <FileText className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
-                    <div className="text-sm text-muted-foreground mb-4">
-                      No pages yet. Create your first page to get started.
-                    </div>
-                    <Button onClick={handleCreatePage}>
-                      <Plus className="w-4 h-4 mr-2" />
-                      Create page
-                    </Button>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
+        {/* Recent Pages - Simple List */}
+        {recentPages.length > 0 && (
+          <div className="space-y-1">
+            <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-4 flex items-center gap-2">
+              <Clock className="w-4 h-4" />
+              Recently visited
+            </h2>
+            
+            <div className="space-y-1">
+              {recentPages.slice(0, 10).map((page) => (
+                <Link
+                  key={page.id}
+                  href={`/workspace/${workspace.id}/page/${page.id}`}
+                  className="flex items-center gap-3 py-2 px-3 -mx-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group"
+                >
+                  <span className="text-lg flex-shrink-0">
+                    {page.icon || '📄'}
+                  </span>
+                  <span className="flex-1 text-sm text-gray-700 dark:text-gray-300 truncate">
+                    {page.title || 'Untitled'}
+                  </span>
+                  <span className="text-xs text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity">
+                    {formatTime(page.updatedAt)}
+                  </span>
+                </Link>
+              ))}
+            </div>
           </div>
-
-          {/* Team Members */}
-          <div>
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Users className="w-5 h-5" />
-                  Team Members
-                </CardTitle>
-                <CardDescription>
-                  People in this workspace
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-3">
-                  {workspace.members.slice(0, 8).map((member: any) => (
-                    <div key={member.id} className="flex items-center gap-3">
-                      <Avatar className="w-8 h-8">
-                        {member.user.avatarUrl ? (
-                          <img 
-                            src={member.user.avatarUrl} 
-                            alt={member.user.name || 'User'} 
-                            className="w-full h-full object-cover"
-                          />
-                        ) : (
-                          <div className="w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-medium">
-                            {(member.user.name || member.user.email).charAt(0).toUpperCase()}
-                          </div>
-                        )}
-                      </Avatar>
-                      <div className="flex-1 min-w-0">
-                        <div className="text-sm font-medium truncate">
-                          {member.user.name || member.user.email}
-                        </div>
-                        <div className="text-xs text-muted-foreground">
-                          {member.role.toLowerCase()}
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                  
-                  {workspace.members.length > 8 && (
-                    <div className="text-xs text-muted-foreground text-center pt-2">
-                      +{workspace.members.length - 8} more members
-                    </div>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
+        )}
+
+        {/* Empty State */}
+        {recentPages.length === 0 && (
+          <div className="text-center py-12">
+            <p className="text-gray-500 dark:text-gray-400 mb-4">
+              No pages yet. Create your first page to get started.
+            </p>
+            <Button onClick={handleCreatePage}>
+              <Plus className="w-4 h-4 mr-2" />
+              Create your first page
+            </Button>
           </div>
-        </div>
-
-        {/* Quick Actions */}
-        <div className="mt-8">
-          <Card>
-            <CardHeader>
-              <CardTitle>Quick Actions</CardTitle>
-              <CardDescription>
-                Common tasks and shortcuts
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                <Button 
-                  variant="outline" 
-                  className="justify-start h-auto p-4"
-                  onClick={handleCreatePage}
-                >
-                  <div className="flex items-center gap-3">
-                    <Plus className="w-5 h-5" />
-                    <div className="text-left">
-                      <div className="font-medium">New Page</div>
-                      <div className="text-xs text-muted-foreground">
-                        Start writing
-                      </div>
-                    </div>
-                  </div>
-                </Button>
-
-                <Button 
-                  variant="outline" 
-                  className="justify-start h-auto p-4"
-                  onClick={() => router.push(`/workspace/${workspace.id}/pages?filter=archived`)}
-                >
-                  <div className="flex items-center gap-3">
-                    <Archive className="w-5 h-5" />
-                    <div className="text-left">
-                      <div className="font-medium">View Archive</div>
-                      <div className="text-xs text-muted-foreground">
-                        {stats.archivedPages} pages
-                      </div>
-                    </div>
-                  </div>
-                </Button>
-
-                <Button 
-                  variant="outline" 
-                  className="justify-start h-auto p-4"
-                  onClick={() => router.push(`/workspace/${workspace.id}/settings`)}
-                >
-                  <div className="flex items-center gap-3">
-                    <Users className="w-5 h-5" />
-                    <div className="text-left">
-                      <div className="font-medium">Workspace Settings</div>
-                      <div className="text-xs text-muted-foreground">
-                        Manage team
-                      </div>
-                    </div>
-                  </div>
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
+        )}
       </div>
 
       {/* New Page Dialog */}
-      <NewPageDialog
-        open={newPageOpen}
-        onOpenChange={setNewPageOpen}
-        workspaceId={workspace.id}
-      />
+      {newPageOpen && (
+        <NewPageDialog
+          workspaceId={workspace.id}
+          onClose={() => setNewPageOpen(false)}
+          onSuccess={(pageId) => {
+            setNewPageOpen(false)
+            router.push(`/workspace/${workspace.id}/page/${pageId}`)
+          }}
+        />
+      )}
     </div>
   )
 }
\ No newline at end of file
diff --git a/app/(protected)/workspace/[workspaceId]/page.tsx b/app/(protected)/workspace/[workspaceId]/page.tsx
index d52c251..a85ef9a 100644
--- a/app/(protected)/workspace/[workspaceId]/page.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page.tsx
@@ -46,57 +46,37 @@ async function getWorkspaceData(workspaceId: string, userId: string) {
     return null
   }
 
-  // Get recent pages in workspace
+  // Get recent pages that the user has created or edited
   const recentPages = await prisma.page.findMany({
     where: {
       workspaceId: workspace.id,
       isDeleted: false,
-      isArchived: false
+      isArchived: false,
+      OR: [
+        { authorId: userId },  // Pages created by the user
+        { 
+          updatedAt: {
+            gte: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) // Pages updated in last 30 days
+          }
+        }
+      ]
     },
     orderBy: {
       updatedAt: 'desc'
     },
-    take: 10,
-    include: {
-      author: {
-        select: {
-          name: true,
-          avatarUrl: true
-        }
-      }
+    take: 15,  // Show up to 15 recent pages
+    select: {
+      id: true,
+      title: true,
+      icon: true,
+      updatedAt: true,
+      authorId: true
     }
   })
 
-  // Get workspace statistics
-  const [totalPages, archivedPages, totalMembers] = await Promise.all([
-    prisma.page.count({
-      where: {
-        workspaceId: workspace.id,
-        isDeleted: false
-      }
-    }),
-    prisma.page.count({
-      where: {
-        workspaceId: workspace.id,
-        isArchived: true,
-        isDeleted: false
-      }
-    }),
-    prisma.workspaceMember.count({
-      where: {
-        workspaceId: workspace.id
-      }
-    })
-  ])
-
   return {
     workspace,
-    recentPages,
-    stats: {
-      totalPages,
-      archivedPages,
-      totalMembers
-    }
+    recentPages
   }
 }
 
@@ -114,13 +94,12 @@ export default async function WorkspacePage({ params }: WorkspacePageProps) {
     notFound()
   }
 
-  const { workspace, recentPages, stats } = data
+  const { workspace, recentPages } = data
 
   return (
     <WorkspaceDashboard 
       workspace={workspace}
       recentPages={recentPages}
-      stats={stats}
       currentUser={user}
     />
   )

From bcec0cc739ce3b51ece225e0519ff5528b8d3cad Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 15:38:20 +0530
Subject: [PATCH 19/43] cleanups for homepage

---
 .../[workspaceId]/WorkspaceDashboard.tsx      | 46 ++-----------------
 1 file changed, 4 insertions(+), 42 deletions(-)

diff --git a/app/(protected)/workspace/[workspaceId]/WorkspaceDashboard.tsx b/app/(protected)/workspace/[workspaceId]/WorkspaceDashboard.tsx
index 9b6a5be..6edf913 100644
--- a/app/(protected)/workspace/[workspaceId]/WorkspaceDashboard.tsx
+++ b/app/(protected)/workspace/[workspaceId]/WorkspaceDashboard.tsx
@@ -1,10 +1,6 @@
 'use client'
 
-import { useState } from 'react'
-import { useRouter } from 'next/navigation'
-import { Plus, Clock } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { NewPageDialog } from '@/components/pages/NewPageDialog'
+import { Clock } from 'lucide-react'
 import Link from 'next/link'
 
 interface WorkspaceDashboardProps {
@@ -18,12 +14,6 @@ export function WorkspaceDashboard({
   recentPages, 
   currentUser 
 }: WorkspaceDashboardProps) {
-  const [newPageOpen, setNewPageOpen] = useState(false)
-  const router = useRouter()
-
-  const handleCreatePage = () => {
-    setNewPageOpen(true)
-  }
 
   const getGreeting = () => {
     const hour = new Date().getHours()
@@ -56,22 +46,10 @@ export function WorkspaceDashboard({
     <div className="flex-1 overflow-auto bg-white dark:bg-[#191919]">
       <div className="max-w-3xl mx-auto px-8 py-12">
         {/* Simple Greeting */}
-        <h1 className="text-2xl font-semibold mb-8 text-gray-900 dark:text-gray-100">
+        <h1 className="text-2xl font-semibold mb-12 text-gray-900 dark:text-gray-100">
           {getGreeting()}
         </h1>
 
-        {/* Quick Actions */}
-        <div className="mb-12">
-          <Button 
-            onClick={handleCreatePage}
-            variant="outline"
-            className="hover:bg-gray-50 dark:hover:bg-gray-800"
-          >
-            <Plus className="w-4 h-4 mr-2" />
-            New page
-          </Button>
-        </div>
-
         {/* Recent Pages - Simple List */}
         {recentPages.length > 0 && (
           <div className="space-y-1">
@@ -105,28 +83,12 @@ export function WorkspaceDashboard({
         {/* Empty State */}
         {recentPages.length === 0 && (
           <div className="text-center py-12">
-            <p className="text-gray-500 dark:text-gray-400 mb-4">
-              No pages yet. Create your first page to get started.
+            <p className="text-gray-500 dark:text-gray-400">
+              No pages yet. Create a new page from the sidebar to get started.
             </p>
-            <Button onClick={handleCreatePage}>
-              <Plus className="w-4 h-4 mr-2" />
-              Create your first page
-            </Button>
           </div>
         )}
       </div>
-
-      {/* New Page Dialog */}
-      {newPageOpen && (
-        <NewPageDialog
-          workspaceId={workspace.id}
-          onClose={() => setNewPageOpen(false)}
-          onSuccess={(pageId) => {
-            setNewPageOpen(false)
-            router.push(`/workspace/${workspace.id}/page/${pageId}`)
-          }}
-        />
-      )}
     </div>
   )
 }
\ No newline at end of file

From 5e277407d6ef52472621cfd66f511a822ff75244 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 16:09:55 +0530
Subject: [PATCH 20/43] update settings page

---
 app/api/user/profile/route.ts         |  41 ++
 components/layout/notion-sidebar.tsx  |  15 +-
 components/settings/SettingsModal.tsx | 631 ++++++++++++++++++++++++++
 components/ui/radio-group.tsx         |  44 ++
 components/ui/select.tsx              | 160 +++++++
 components/ui/switch.tsx              |  29 ++
 package.json                          |   1 +
 pnpm-lock.yaml                        |  14 +
 8 files changed, 934 insertions(+), 1 deletion(-)
 create mode 100644 app/api/user/profile/route.ts
 create mode 100644 components/settings/SettingsModal.tsx
 create mode 100644 components/ui/radio-group.tsx
 create mode 100644 components/ui/select.tsx
 create mode 100644 components/ui/switch.tsx

diff --git a/app/api/user/profile/route.ts b/app/api/user/profile/route.ts
new file mode 100644
index 0000000..9479ebd
--- /dev/null
+++ b/app/api/user/profile/route.ts
@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth-config'
+import { prisma } from '@/lib/db/prisma'
+
+export async function PATCH(request: NextRequest) {
+  try {
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const { name, email } = body
+
+    // Update user profile
+    const updatedUser = await prisma.user.update({
+      where: { id: user.id },
+      data: {
+        name: name || null,
+        email: email || user.email,
+      },
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        avatarUrl: true,
+      }
+    })
+
+    return NextResponse.json(updatedUser)
+  } catch (error) {
+    console.error('Error updating profile:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index 6e03cd2..08c46e9 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -33,9 +33,11 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { Separator } from "@/components/ui/separator"
 import { signOut } from "next-auth/react"
 import { CreateWorkspaceModal } from "@/components/workspace/create-workspace-modal"
 import { SearchDialog } from "@/components/search/SearchDialog"
+import { SettingsModal } from "@/components/settings/SettingsModal"
 import { cn } from "@/lib/utils"
 import toast from "react-hot-toast"
 
@@ -62,6 +64,7 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
   const [isCreatingPage, setIsCreatingPage] = useState(false)
   const [collapsed, setCollapsed] = useState(false)
   const [refreshKey, setRefreshKey] = useState(0)
+  const [settingsOpen, setSettingsOpen] = useState(false)
   
   // Keyboard shortcuts
   useEffect(() => {
@@ -291,7 +294,11 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
             }
             onClick={() => setShowSearchDialog(true)} 
           />
-          <SidebarItem icon={<Settings />} label="Settings" onClick={() => {}} />
+          <SidebarItem 
+            icon={<Settings />} 
+            label="Settings & members" 
+            onClick={() => setSettingsOpen(true)}
+          />
           <SidebarItem 
             icon={<Plus />} 
             label="New page" 
@@ -393,6 +400,12 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
           workspaceId={currentWorkspace.id}
         />
       )}
+      
+      <SettingsModal
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+        user={user}
+      />
     </>
   )
 }
diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
new file mode 100644
index 0000000..6a99574
--- /dev/null
+++ b/components/settings/SettingsModal.tsx
@@ -0,0 +1,631 @@
+'use client'
+
+import { useState } from 'react'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Switch } from '@/components/ui/switch'
+import { Separator } from '@/components/ui/separator'
+import { 
+  User, 
+  Bell, 
+  Shield, 
+  Palette, 
+  Users, 
+  CreditCard,
+  Settings,
+  LogOut,
+  Loader2,
+  ChevronLeft,
+  Moon,
+  Sun,
+  Monitor
+} from 'lucide-react'
+import { signOut } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+// import { useTheme } from 'next-themes'
+import toast from 'react-hot-toast'
+
+interface SettingsModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  user: any
+}
+
+type SettingsSection = 
+  | 'main'
+  | 'account' 
+  | 'notifications' 
+  | 'security' 
+  | 'appearance'
+  | 'workspace'
+  | 'billing'
+
+export function SettingsModal({ open, onOpenChange, user }: SettingsModalProps) {
+  const router = useRouter()
+  // const { theme, setTheme } = useTheme()
+  const [theme, setTheme] = useState('light')
+  const [currentSection, setCurrentSection] = useState<SettingsSection>('account')
+  const [isLoading, setIsLoading] = useState(false)
+  
+  // Account settings state
+  const [name, setName] = useState(user?.name || '')
+  const [email, setEmail] = useState(user?.email || '')
+  
+  // Notification settings state
+  const [emailNotifications, setEmailNotifications] = useState({
+    pageComments: true,
+    pageMentions: true,
+    pageShared: true,
+    weeklyDigest: false,
+    productUpdates: true,
+  })
+  
+  const [pushNotifications, setPushNotifications] = useState({
+    pageComments: true,
+    pageMentions: true,
+    pageShared: false,
+  })
+
+  // Workspace settings state
+  const [workspaceName, setWorkspaceName] = useState('My Workspace')
+  const [workspaceUrl, setWorkspaceUrl] = useState('my-workspace')
+  const [description, setDescription] = useState('')
+
+  const handleUpdateProfile = async () => {
+    setIsLoading(true)
+    try {
+      const response = await fetch('/api/user/profile', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, email })
+      })
+      
+      if (response.ok) {
+        toast.success('Profile updated successfully')
+        router.refresh()
+      } else {
+        toast.error('Failed to update profile')
+      }
+    } catch (error) {
+      console.error('Error updating profile:', error)
+      toast.error('Failed to update profile')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleSaveNotifications = () => {
+    // Save notification preferences
+    toast.success('Notification preferences saved')
+  }
+
+  const handleUpdateWorkspace = async () => {
+    setIsLoading(true)
+    try {
+      // Update workspace via API
+      toast.success('Workspace updated successfully')
+      router.refresh()
+    } catch (error) {
+      console.error('Error updating workspace:', error)
+      toast.error('Failed to update workspace')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleDeleteAccount = async () => {
+    if (!confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
+      return
+    }
+    
+    setIsLoading(true)
+    try {
+      // Delete account via API
+      toast.success('Account deleted successfully')
+      signOut({ callbackUrl: '/' })
+    } catch (error) {
+      console.error('Error deleting account:', error)
+      toast.error('Failed to delete account')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const renderSidebar = () => (
+    <div className="w-60 bg-gray-50 dark:bg-[#1a1a1a] h-full border-r dark:border-gray-800">
+      <div className="p-4">
+        <h2 className="text-sm font-semibold mb-1">{user?.name || 'User'}</h2>
+        <p className="text-xs text-gray-500 dark:text-gray-400">{user?.email}</p>
+      </div>
+      
+      <div className="px-2">
+        <div className="mb-2">
+          <p className="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400">Account</p>
+        </div>
+        
+        <button
+          onClick={() => setCurrentSection('account')}
+          className={cn(
+            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
+            currentSection === 'account' 
+              ? "bg-gray-200 dark:bg-gray-800" 
+              : "hover:bg-gray-100 dark:hover:bg-gray-800"
+          )}
+        >
+          <User className="h-4 w-4" />
+          My account
+        </button>
+        
+        <button
+          onClick={() => setCurrentSection('notifications')}
+          className={cn(
+            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
+            currentSection === 'notifications' 
+              ? "bg-gray-200 dark:bg-gray-800" 
+              : "hover:bg-gray-100 dark:hover:bg-gray-800"
+          )}
+        >
+          <Bell className="h-4 w-4" />
+          My notifications
+        </button>
+        
+        <button
+          onClick={() => setCurrentSection('security')}
+          className={cn(
+            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
+            currentSection === 'security' 
+              ? "bg-gray-200 dark:bg-gray-800" 
+              : "hover:bg-gray-100 dark:hover:bg-gray-800"
+          )}
+        >
+          <Shield className="h-4 w-4" />
+          Security
+        </button>
+        
+        <button
+          onClick={() => setCurrentSection('appearance')}
+          className={cn(
+            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
+            currentSection === 'appearance' 
+              ? "bg-gray-200 dark:bg-gray-800" 
+              : "hover:bg-gray-100 dark:hover:bg-gray-800"
+          )}
+        >
+          <Palette className="h-4 w-4" />
+          Appearance
+        </button>
+        
+        <div className="my-2" />
+        
+        <div className="mb-2">
+          <p className="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400">Workspace</p>
+        </div>
+        
+        <button
+          onClick={() => setCurrentSection('workspace')}
+          className={cn(
+            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
+            currentSection === 'workspace' 
+              ? "bg-gray-200 dark:bg-gray-800" 
+              : "hover:bg-gray-100 dark:hover:bg-gray-800"
+          )}
+        >
+          <Settings className="h-4 w-4" />
+          Settings
+        </button>
+        
+        <button
+          onClick={() => setCurrentSection('billing')}
+          className={cn(
+            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
+            currentSection === 'billing' 
+              ? "bg-gray-200 dark:bg-gray-800" 
+              : "hover:bg-gray-100 dark:hover:bg-gray-800"
+          )}
+        >
+          <CreditCard className="h-4 w-4" />
+          Billing
+        </button>
+        
+        <button
+          className={cn(
+            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
+            "hover:bg-gray-100 dark:hover:bg-gray-800"
+          )}
+        >
+          <Users className="h-4 w-4" />
+          Members
+        </button>
+        
+        <div className="my-3 mx-2 border-t dark:border-gray-800" />
+        
+        <button
+          onClick={() => signOut({ callbackUrl: '/' })}
+          className="w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-gray-800 text-red-600 dark:text-red-400"
+        >
+          <LogOut className="h-4 w-4" />
+          Log out
+        </button>
+      </div>
+    </div>
+  )
+
+  const renderAccountSettings = () => (
+    <div className="p-8">
+      <h2 className="text-2xl font-semibold mb-6">My account</h2>
+      
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <div className="h-16 w-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-2xl font-bold">
+            {name?.[0]?.toUpperCase() || email?.[0]?.toUpperCase() || 'U'}
+          </div>
+          <Button variant="outline" size="sm">
+            Upload photo
+          </Button>
+        </div>
+        
+        <div className="space-y-4">
+          <div className="grid gap-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter your name"
+            />
+          </div>
+          
+          <div className="grid gap-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+            />
+          </div>
+        </div>
+        
+        <Button onClick={handleUpdateProfile} disabled={isLoading}>
+          {isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+          Update profile
+        </Button>
+        
+        <Separator />
+        
+        <div className="space-y-4">
+          <div>
+            <h3 className="text-sm font-medium text-red-600 dark:text-red-400">
+              Delete account
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              Permanently delete your account and all data
+            </p>
+          </div>
+          
+          <Button 
+            variant="destructive" 
+            size="sm"
+            onClick={handleDeleteAccount}
+            disabled={isLoading}
+          >
+            {isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+            Delete account
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+
+  const renderNotificationSettings = () => (
+    <div className="p-8">
+      <h2 className="text-2xl font-semibold mb-6">My notifications</h2>
+      
+      <div className="space-y-6">
+        <div className="space-y-4">
+          <Label className="text-sm font-medium">Email notifications</Label>
+          
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium">Comments on your pages</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  Get notified when someone comments on your pages
+                </p>
+              </div>
+              <Switch
+                checked={emailNotifications.pageComments}
+                onCheckedChange={(checked) => 
+                  setEmailNotifications(prev => ({ ...prev, pageComments: checked }))
+                }
+              />
+            </div>
+            
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium">Mentions</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  Get notified when someone mentions you
+                </p>
+              </div>
+              <Switch
+                checked={emailNotifications.pageMentions}
+                onCheckedChange={(checked) => 
+                  setEmailNotifications(prev => ({ ...prev, pageMentions: checked }))
+                }
+              />
+            </div>
+            
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium">Page shared with you</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  Get notified when someone shares a page with you
+                </p>
+              </div>
+              <Switch
+                checked={emailNotifications.pageShared}
+                onCheckedChange={(checked) => 
+                  setEmailNotifications(prev => ({ ...prev, pageShared: checked }))
+                }
+              />
+            </div>
+          </div>
+        </div>
+        
+        <Separator />
+        
+        <div className="space-y-4">
+          <Label className="text-sm font-medium">Push notifications</Label>
+          
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium">Comments on your pages</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  Get browser notifications for comments
+                </p>
+              </div>
+              <Switch
+                checked={pushNotifications.pageComments}
+                onCheckedChange={(checked) => 
+                  setPushNotifications(prev => ({ ...prev, pageComments: checked }))
+                }
+              />
+            </div>
+            
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium">Mentions</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  Get browser notifications when mentioned
+                </p>
+              </div>
+              <Switch
+                checked={pushNotifications.pageMentions}
+                onCheckedChange={(checked) => 
+                  setPushNotifications(prev => ({ ...prev, pageMentions: checked }))
+                }
+              />
+            </div>
+          </div>
+        </div>
+        
+        <Button onClick={handleSaveNotifications}>
+          Save preferences
+        </Button>
+      </div>
+    </div>
+  )
+
+  const renderAppearanceSettings = () => (
+    <div className="p-8">
+      <h2 className="text-2xl font-semibold mb-6">Appearance</h2>
+      
+      <div className="space-y-6">
+        <div className="space-y-4">
+          <Label className="text-sm font-medium">Theme</Label>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Choose how Notion looks to you
+          </p>
+          
+          <div className="grid grid-cols-3 gap-3">
+            <button
+              onClick={() => setTheme('light')}
+              className={`p-3 rounded-lg border-2 transition-colors ${
+                theme === 'light' 
+                  ? 'border-blue-500 bg-blue-50 dark:bg-blue-950' 
+                  : 'border-gray-200 dark:border-gray-700'
+              }`}
+            >
+              <Sun className="h-5 w-5 mx-auto mb-2" />
+              <span className="text-xs">Light</span>
+            </button>
+            
+            <button
+              onClick={() => setTheme('dark')}
+              className={`p-3 rounded-lg border-2 transition-colors ${
+                theme === 'dark' 
+                  ? 'border-blue-500 bg-blue-50 dark:bg-blue-950' 
+                  : 'border-gray-200 dark:border-gray-700'
+              }`}
+            >
+              <Moon className="h-5 w-5 mx-auto mb-2" />
+              <span className="text-xs">Dark</span>
+            </button>
+            
+            <button
+              onClick={() => setTheme('system')}
+              className={`p-3 rounded-lg border-2 transition-colors ${
+                theme === 'system' 
+                  ? 'border-blue-500 bg-blue-50 dark:bg-blue-950' 
+                  : 'border-gray-200 dark:border-gray-700'
+              }`}
+            >
+              <Monitor className="h-5 w-5 mx-auto mb-2" />
+              <span className="text-xs">System</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
+  const renderWorkspaceSettings = () => (
+    <div className="p-8">
+      <h2 className="text-2xl font-semibold mb-6">Workspace settings</h2>
+      
+      <div className="space-y-6">
+        <div className="space-y-4">
+          <div className="grid gap-2">
+            <Label htmlFor="workspace-name">Workspace name</Label>
+            <Input
+              id="workspace-name"
+              value={workspaceName}
+              onChange={(e) => setWorkspaceName(e.target.value)}
+              placeholder="Enter workspace name"
+            />
+          </div>
+          
+          <div className="grid gap-2">
+            <Label htmlFor="workspace-url">Workspace URL</Label>
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-gray-500">notion-clone.com/</span>
+              <Input
+                id="workspace-url"
+                value={workspaceUrl}
+                onChange={(e) => setWorkspaceUrl(e.target.value.toLowerCase().replace(/\s+/g, '-'))}
+                placeholder="workspace-url"
+                className="flex-1"
+              />
+            </div>
+          </div>
+          
+          <div className="grid gap-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="What's your workspace about?"
+              rows={3}
+            />
+          </div>
+        </div>
+        
+        <Button onClick={handleUpdateWorkspace} disabled={isLoading}>
+          {isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+          Update workspace
+        </Button>
+        
+        <Separator />
+        
+        <div className="space-y-4">
+          <div>
+            <h3 className="text-sm font-medium">Export data</h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              Download all your workspace data
+            </p>
+          </div>
+          
+          <Button variant="outline" size="sm">
+            Export all workspace data
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+
+  const renderSecuritySettings = () => (
+    <div className="p-8">
+      <h2 className="text-2xl font-semibold mb-6">Security</h2>
+      
+      <div className="space-y-6">
+        <div className="space-y-4">
+          <div>
+            <h3 className="text-sm font-medium">Password</h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              Change your password
+            </p>
+          </div>
+          
+          <Button variant="outline" size="sm">
+            Change password
+          </Button>
+        </div>
+        
+        <Separator />
+        
+        <div className="space-y-4">
+          <div>
+            <h3 className="text-sm font-medium">Two-factor authentication</h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              Add an extra layer of security to your account
+            </p>
+          </div>
+          
+          <Button variant="outline" size="sm">
+            Enable 2FA
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+
+  const renderBillingSettings = () => (
+    <div className="p-8">
+      <h2 className="text-2xl font-semibold mb-6">Billing</h2>
+      
+      <div className="space-y-6">
+        <div className="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
+          <h3 className="text-sm font-medium mb-2">Current plan</h3>
+          <p className="text-2xl font-semibold">Free</p>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            For personal use
+          </p>
+        </div>
+        
+        <Button className="w-full">
+          Upgrade to Pro
+        </Button>
+      </div>
+    </div>
+  )
+
+  const renderContent = () => {
+    switch (currentSection) {
+      case 'account':
+        return renderAccountSettings()
+      case 'notifications':
+        return renderNotificationSettings()
+      case 'appearance':
+        return renderAppearanceSettings()
+      case 'workspace':
+        return renderWorkspaceSettings()
+      case 'security':
+        return renderSecuritySettings()
+      case 'billing':
+        return renderBillingSettings()
+      default:
+        return renderAccountSettings()
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl h-[600px] p-0 gap-0 bg-white dark:bg-[#191919]">
+        <div className="flex h-full">
+          {renderSidebar()}
+          <div className="flex-1 overflow-y-auto">
+            {renderContent()}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
new file mode 100644
index 0000000..e9bde17
--- /dev/null
+++ b/components/ui/radio-group.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
new file mode 100644
index 0000000..a45647c
--- /dev/null
+++ b/components/ui/select.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
new file mode 100644
index 0000000..bc69cf2
--- /dev/null
+++ b/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/package.json b/package.json
index a4e9ab1..247aaed 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "mongodb": "^6.11.0",
     "next": "^15.1.0",
     "next-auth": "^4.24.11",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-day-picker": "^9.4.1",
     "react-dom": "^19.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a679901..d8146a4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -143,6 +143,9 @@ importers:
       next-auth:
         specifier: ^4.24.11
         version: 4.24.11(next@15.5.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react:
         specifier: ^19.0.0
         version: 19.1.1
@@ -2630,6 +2633,12 @@ packages:
       nodemailer:
         optional: true
 
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   next@15.5.0:
     resolution: {integrity: sha512-N1lp9Hatw3a9XLt0307lGB4uTKsXDhyOKQo7uYMzX4i0nF/c27grcGXkLdb7VcT8QPYLBa8ouIyEoUQJ2OyeNQ==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -5981,6 +5990,11 @@ snapshots:
       react-dom: 19.1.1(react@19.1.1)
       uuid: 8.3.2
 
+  next-themes@0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
   next@15.5.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
       '@next/env': 15.5.0

From 0075365034728313f50cdf0d755403f07e541f80 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 16:22:49 +0530
Subject: [PATCH 21/43] fix settings modal

---
 components/settings/SettingsModal.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
index 6a99574..3f69e61 100644
--- a/components/settings/SettingsModal.tsx
+++ b/components/settings/SettingsModal.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -619,6 +619,7 @@ export function SettingsModal({ open, onOpenChange, user }: SettingsModalProps)
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-4xl h-[600px] p-0 gap-0 bg-white dark:bg-[#191919]">
+        <DialogTitle className="sr-only">Settings</DialogTitle>
         <div className="flex h-full">
           {renderSidebar()}
           <div className="flex-1 overflow-y-auto">

From c475a091b321b9eec9a612660531fe53ae29f604 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 17:08:07 +0530
Subject: [PATCH 22/43] add user management

---
 .../[workspaceId]/page/[pageId]/page.tsx      |  18 +-
 app/api/pages/[pageId]/content/route.ts       |  42 ++-
 app/api/pages/[pageId]/route.ts               |  42 ++-
 app/api/pages/route.ts                        |  17 +-
 .../[workspaceId]/members/[memberId]/route.ts | 197 +++++++++++
 .../workspaces/[workspaceId]/members/route.ts | 175 ++++++++++
 app/api/workspaces/[workspaceId]/route.ts     | 164 +++++++++
 components/layout/notion-sidebar.tsx          |   1 +
 components/settings/SettingsModal.tsx         | 314 +++++++++++++++++-
 9 files changed, 932 insertions(+), 38 deletions(-)
 create mode 100644 app/api/workspaces/[workspaceId]/members/[memberId]/route.ts
 create mode 100644 app/api/workspaces/[workspaceId]/members/route.ts
 create mode 100644 app/api/workspaces/[workspaceId]/route.ts

diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/page.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/page.tsx
index 6a9ffe9..05eedb4 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/page.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/page.tsx
@@ -58,13 +58,19 @@ export default async function PageEditorPage({ params }: PageEditorPageProps) {
       notFound()
     }
 
-    // Check permissions (basic check - you might want to implement more sophisticated permissions)
-    const isOwner = page.authorId === user.id
-    // TODO: Check workspace membership and page permissions
+    // 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 (!isOwner) {
-      // For now, redirect to workspace - implement proper permission handling later
-      redirect(`/workspace/${resolvedParams.workspaceId}`)
+    if (!workspaceMember) {
+      // User is not a member of this workspace
+      notFound()
     }
 
     // Get page content from MongoDB
diff --git a/app/api/pages/[pageId]/content/route.ts b/app/api/pages/[pageId]/content/route.ts
index e35226f..7a2a21d 100644
--- a/app/api/pages/[pageId]/content/route.ts
+++ b/app/api/pages/[pageId]/content/route.ts
@@ -34,9 +34,17 @@ export async function GET(
       return NextResponse.json({ error: 'Page not found' }, { status: 404 })
     }
 
-    // TODO: Implement proper permission checking
-    // For now, only allow page owner to access
-    if (page.authorId !== session.user.id) {
+    // Check if user is a member of the workspace
+    const workspaceMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId: page.workspaceId
+        }
+      }
+    })
+
+    if (!workspaceMember) {
       return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
     }
 
@@ -100,9 +108,17 @@ export async function PUT(
       return NextResponse.json({ error: 'Page not found' }, { status: 404 })
     }
 
-    // TODO: Implement proper permission checking
-    // For now, only allow page owner to edit
-    if (page.authorId !== user.id) {
+    // Check if user is a member of the workspace
+    const workspaceMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId: page.workspaceId
+        }
+      }
+    })
+
+    if (!workspaceMember) {
       return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
     }
 
@@ -164,9 +180,17 @@ export async function DELETE(
       return NextResponse.json({ error: 'Page not found' }, { status: 404 })
     }
 
-    // TODO: Implement proper permission checking
-    // For now, only allow page owner to delete
-    if (page.authorId !== session.user.id) {
+    // Check if user is a member of the workspace
+    const workspaceMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId: page.workspaceId
+        }
+      }
+    })
+
+    if (!workspaceMember) {
       return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
     }
 
diff --git a/app/api/pages/[pageId]/route.ts b/app/api/pages/[pageId]/route.ts
index 46cb45d..0d035ae 100644
--- a/app/api/pages/[pageId]/route.ts
+++ b/app/api/pages/[pageId]/route.ts
@@ -52,9 +52,17 @@ export async function GET(
       return NextResponse.json({ error: 'Page not found' }, { status: 404 })
     }
 
-    // TODO: Implement proper permission checking
-    // For now, only allow page owner to access
-    if (page.authorId !== user.id) {
+    // Check if user is a member of the workspace
+    const workspaceMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId: page.workspaceId
+        }
+      }
+    })
+
+    if (!workspaceMember) {
       return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
     }
 
@@ -127,9 +135,17 @@ export async function PATCH(
       return NextResponse.json({ error: 'Page not found' }, { status: 404 })
     }
 
-    // TODO: Implement proper permission checking
-    // For now, only allow page owner to edit
-    if (existingPage.authorId !== user.id) {
+    // Check if user is a member of the workspace
+    const workspaceMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId: existingPage.workspaceId
+        }
+      }
+    })
+
+    if (!workspaceMember) {
       return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
     }
 
@@ -199,9 +215,17 @@ export async function DELETE(
       return NextResponse.json({ error: 'Page not found' }, { status: 404 })
     }
 
-    // TODO: Implement proper permission checking
-    // For now, only allow page owner to delete
-    if (page.authorId !== user.id) {
+    // Check if user is a member of the workspace
+    const workspaceMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId: page.workspaceId
+        }
+      }
+    })
+
+    if (!workspaceMember) {
       return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
     }
 
diff --git a/app/api/pages/route.ts b/app/api/pages/route.ts
index 5e5d2f6..bf1bb5e 100644
--- a/app/api/pages/route.ts
+++ b/app/api/pages/route.ts
@@ -20,8 +20,7 @@ export async function GET(request: NextRequest) {
     const offset = parseInt(searchParams.get('offset') || '0')
 
     const where: any = {
-      isDeleted: false,
-      authorId: user.id // TODO: Extend to workspace permissions
+      isDeleted: false
     }
 
     if (workspaceId) {
@@ -114,16 +113,18 @@ export async function POST(request: NextRequest) {
       )
     }
 
-    // Verify workspace exists and user has access
-    const workspace = await prisma.workspace.findFirst({
+    // Verify workspace exists and user is a member
+    const workspaceMember = await prisma.workspaceMember.findUnique({
       where: {
-        id: workspaceId,
-        // TODO: Add workspace membership check
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId
+        }
       }
     })
 
-    if (!workspace) {
-      return NextResponse.json({ error: 'Workspace not found' }, { status: 404 })
+    if (!workspaceMember) {
+      return NextResponse.json({ error: 'You are not a member of this workspace' }, { status: 403 })
     }
 
     // If parentId provided, verify parent page exists and user has access
diff --git a/app/api/workspaces/[workspaceId]/members/[memberId]/route.ts b/app/api/workspaces/[workspaceId]/members/[memberId]/route.ts
new file mode 100644
index 0000000..fac061e
--- /dev/null
+++ b/app/api/workspaces/[workspaceId]/members/[memberId]/route.ts
@@ -0,0 +1,197 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth-config'
+import { prisma } from '@/lib/db/prisma'
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ workspaceId: string; memberId: string }> }
+) {
+  const { workspaceId, memberId } = await params
+  
+  try {
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const { role } = body
+
+    // Check if current user is admin or owner
+    const currentMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId
+        }
+      }
+    })
+
+    if (!currentMember || !['ADMIN', 'OWNER'].includes(currentMember.role)) {
+      return NextResponse.json(
+        { error: 'Only admins and owners can update member roles' },
+        { status: 403 }
+      )
+    }
+
+    // Prevent changing owner role if they're the only owner
+    const targetMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: memberId,
+          workspaceId
+        }
+      }
+    })
+
+    if (!targetMember) {
+      return NextResponse.json({ error: 'Member not found' }, { status: 404 })
+    }
+
+    if (targetMember.role === 'OWNER' && role !== 'OWNER') {
+      // Check if there are other owners
+      const ownerCount = await prisma.workspaceMember.count({
+        where: {
+          workspaceId,
+          role: 'OWNER'
+        }
+      })
+
+      if (ownerCount <= 1) {
+        return NextResponse.json(
+          { error: 'Cannot remove the last owner from workspace' },
+          { status: 400 }
+        )
+      }
+    }
+
+    // Update member role
+    const updatedMember = await prisma.workspaceMember.update({
+      where: {
+        userId_workspaceId: {
+          userId: memberId,
+          workspaceId
+        }
+      },
+      data: { role },
+      include: {
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            avatarUrl: true
+          }
+        }
+      }
+    })
+
+    return NextResponse.json({
+      id: updatedMember.user.id,
+      name: updatedMember.user.name,
+      email: updatedMember.user.email,
+      avatarUrl: updatedMember.user.avatarUrl,
+      role: updatedMember.role
+    })
+  } catch (error) {
+    console.error('Error updating member role:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ workspaceId: string; memberId: string }> }
+) {
+  const { workspaceId, memberId } = await params
+  
+  try {
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    // Check if current user is admin or owner
+    const currentMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId
+        }
+      }
+    })
+
+    if (!currentMember) {
+      return NextResponse.json({ error: 'Access denied' }, { status: 403 })
+    }
+
+    // Users can remove themselves, or admins/owners can remove others
+    const canRemove = 
+      memberId === user.id || 
+      ['ADMIN', 'OWNER'].includes(currentMember.role)
+
+    if (!canRemove) {
+      return NextResponse.json(
+        { error: 'You do not have permission to remove this member' },
+        { status: 403 }
+      )
+    }
+
+    // Check if member exists
+    const targetMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: memberId,
+          workspaceId
+        }
+      }
+    })
+
+    if (!targetMember) {
+      return NextResponse.json({ error: 'Member not found' }, { status: 404 })
+    }
+
+    // Prevent removing the last owner
+    if (targetMember.role === 'OWNER') {
+      const ownerCount = await prisma.workspaceMember.count({
+        where: {
+          workspaceId,
+          role: 'OWNER'
+        }
+      })
+
+      if (ownerCount <= 1) {
+        return NextResponse.json(
+          { error: 'Cannot remove the last owner from workspace' },
+          { status: 400 }
+        )
+      }
+    }
+
+    // Remove member from workspace
+    await prisma.workspaceMember.delete({
+      where: {
+        userId_workspaceId: {
+          userId: memberId,
+          workspaceId
+        }
+      }
+    })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error removing member:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/api/workspaces/[workspaceId]/members/route.ts b/app/api/workspaces/[workspaceId]/members/route.ts
new file mode 100644
index 0000000..8be6619
--- /dev/null
+++ b/app/api/workspaces/[workspaceId]/members/route.ts
@@ -0,0 +1,175 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth-config'
+import { prisma } from '@/lib/db/prisma'
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ workspaceId: string }> }
+) {
+  const { workspaceId } = await params
+  
+  try {
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    // Check if user has access to this workspace
+    const workspaceMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId
+        }
+      }
+    })
+
+    if (!workspaceMember) {
+      return NextResponse.json({ error: 'Access denied' }, { status: 403 })
+    }
+
+    // Get all members of the workspace
+    const members = await prisma.workspaceMember.findMany({
+      where: {
+        workspaceId
+      },
+      include: {
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            avatarUrl: true
+          }
+        }
+      },
+      orderBy: {
+        joinedAt: 'asc'
+      }
+    })
+
+    // Format the response
+    const formattedMembers = members.map(member => ({
+      id: member.user.id,
+      name: member.user.name,
+      email: member.user.email,
+      avatarUrl: member.user.avatarUrl,
+      role: member.role,
+      joinedAt: member.joinedAt
+    }))
+
+    return NextResponse.json(formattedMembers)
+  } catch (error) {
+    console.error('Error fetching workspace members:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ workspaceId: string }> }
+) {
+  const { workspaceId } = await params
+  
+  try {
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const { email, role = 'MEMBER' } = body
+
+    // Check if current user is admin or owner
+    const currentMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId
+        }
+      }
+    })
+
+    if (!currentMember || !['ADMIN', 'OWNER'].includes(currentMember.role)) {
+      return NextResponse.json(
+        { error: 'Only admins and owners can invite members' },
+        { status: 403 }
+      )
+    }
+
+    // Check if user exists
+    let invitedUser = await prisma.user.findUnique({
+      where: { email }
+    })
+
+    // If user doesn't exist, create a placeholder/invitation
+    if (!invitedUser) {
+      // In a real app, you'd send an invitation email here
+      // For now, we'll just return success
+      return NextResponse.json({
+        message: 'Invitation sent',
+        email,
+        status: 'pending'
+      })
+    }
+
+    // Check if user is already a member
+    const existingMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: invitedUser.id,
+          workspaceId
+        }
+      }
+    })
+
+    if (existingMember) {
+      return NextResponse.json(
+        { error: 'User is already a member of this workspace' },
+        { status: 400 }
+      )
+    }
+
+    // Add user to workspace
+    const newMember = await prisma.workspaceMember.create({
+      data: {
+        userId: invitedUser.id,
+        workspaceId,
+        role
+      },
+      include: {
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            avatarUrl: true
+          }
+        }
+      }
+    })
+
+    return NextResponse.json({
+      id: newMember.user.id,
+      name: newMember.user.name,
+      email: newMember.user.email,
+      avatarUrl: newMember.user.avatarUrl,
+      role: newMember.role,
+      joinedAt: newMember.joinedAt
+    })
+  } catch (error) {
+    console.error('Error inviting member:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/api/workspaces/[workspaceId]/route.ts b/app/api/workspaces/[workspaceId]/route.ts
new file mode 100644
index 0000000..33f054c
--- /dev/null
+++ b/app/api/workspaces/[workspaceId]/route.ts
@@ -0,0 +1,164 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth-config'
+import { prisma } from '@/lib/db/prisma'
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ workspaceId: string }> }
+) {
+  const { workspaceId } = await params
+  
+  try {
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    // Check if user has access to this workspace
+    const workspaceMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId
+        }
+      }
+    })
+
+    if (!workspaceMember) {
+      return NextResponse.json({ error: 'Access denied' }, { status: 403 })
+    }
+
+    // Get workspace details
+    const workspace = await prisma.workspace.findUnique({
+      where: { id: workspaceId },
+      include: {
+        _count: {
+          select: {
+            members: true,
+            pages: true
+          }
+        }
+      }
+    })
+
+    if (!workspace) {
+      return NextResponse.json({ error: 'Workspace not found' }, { status: 404 })
+    }
+
+    return NextResponse.json({
+      ...workspace,
+      memberCount: workspace._count.members,
+      pageCount: workspace._count.pages,
+      userRole: workspaceMember.role
+    })
+  } catch (error) {
+    console.error('Error fetching workspace:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ workspaceId: string }> }
+) {
+  const { workspaceId } = await params
+  
+  try {
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const { name, description, icon } = body
+
+    // Check if user is admin or owner
+    const workspaceMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId
+        }
+      }
+    })
+
+    if (!workspaceMember || !['ADMIN', 'OWNER'].includes(workspaceMember.role)) {
+      return NextResponse.json(
+        { error: 'Only admins and owners can update workspace settings' },
+        { status: 403 }
+      )
+    }
+
+    // Update workspace
+    const updatedWorkspace = await prisma.workspace.update({
+      where: { id: workspaceId },
+      data: {
+        ...(name && { name }),
+        ...(description !== undefined && { description }),
+        ...(icon !== undefined && { icon })
+      }
+    })
+
+    return NextResponse.json(updatedWorkspace)
+  } catch (error) {
+    console.error('Error updating workspace:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ workspaceId: string }> }
+) {
+  const { workspaceId } = await params
+  
+  try {
+    const session = await getServerSession(authOptions)
+    const user = session?.user
+
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    // Check if user is owner
+    const workspaceMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId
+        }
+      }
+    })
+
+    if (!workspaceMember || workspaceMember.role !== 'OWNER') {
+      return NextResponse.json(
+        { error: 'Only owners can delete workspaces' },
+        { status: 403 }
+      )
+    }
+
+    // Delete workspace (this will cascade delete all related data)
+    await prisma.workspace.delete({
+      where: { id: workspaceId }
+    })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error deleting workspace:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index 08c46e9..aaf20bc 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -405,6 +405,7 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
         open={settingsOpen}
         onOpenChange={setSettingsOpen}
         user={user}
+        workspaceId={currentWorkspace?.id}
       />
     </>
   )
diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
index 3f69e61..bbf2db5 100644
--- a/components/settings/SettingsModal.tsx
+++ b/components/settings/SettingsModal.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
@@ -33,6 +33,7 @@ interface SettingsModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   user: any
+  workspaceId?: string
 }
 
 type SettingsSection = 
@@ -43,8 +44,9 @@ type SettingsSection =
   | 'appearance'
   | 'workspace'
   | 'billing'
+  | 'members'
 
-export function SettingsModal({ open, onOpenChange, user }: SettingsModalProps) {
+export function SettingsModal({ open, onOpenChange, user, workspaceId }: SettingsModalProps) {
   const router = useRouter()
   // const { theme, setTheme } = useTheme()
   const [theme, setTheme] = useState('light')
@@ -74,6 +76,9 @@ export function SettingsModal({ open, onOpenChange, user }: SettingsModalProps)
   const [workspaceName, setWorkspaceName] = useState('My Workspace')
   const [workspaceUrl, setWorkspaceUrl] = useState('my-workspace')
   const [description, setDescription] = useState('')
+  const [members, setMembers] = useState<any[]>([])
+  const [inviteEmail, setInviteEmail] = useState('')
+  const [currentWorkspace, setCurrentWorkspace] = useState<any>(null)
 
   const handleUpdateProfile = async () => {
     setIsLoading(true)
@@ -104,11 +109,28 @@ export function SettingsModal({ open, onOpenChange, user }: SettingsModalProps)
   }
 
   const handleUpdateWorkspace = async () => {
+    if (!workspaceId) {
+      toast.error('No workspace selected')
+      return
+    }
+
     setIsLoading(true)
     try {
-      // Update workspace via API
-      toast.success('Workspace updated successfully')
-      router.refresh()
+      const response = await fetch(`/api/workspaces/${workspaceId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          name: workspaceName,
+          description 
+        })
+      })
+
+      if (response.ok) {
+        toast.success('Workspace updated successfully')
+        router.refresh()
+      } else {
+        toast.error('Failed to update workspace')
+      }
     } catch (error) {
       console.error('Error updating workspace:', error)
       toast.error('Failed to update workspace')
@@ -117,6 +139,27 @@ export function SettingsModal({ open, onOpenChange, user }: SettingsModalProps)
     }
   }
 
+  // Fetch workspace details when modal opens
+  useEffect(() => {
+    const fetchWorkspace = async () => {
+      if (!workspaceId || !open) return
+
+      try {
+        const response = await fetch(`/api/workspaces/${workspaceId}`)
+        if (response.ok) {
+          const data = await response.json()
+          setWorkspaceName(data.name || 'My Workspace')
+          setDescription(data.description || '')
+          setCurrentWorkspace(data)
+        }
+      } catch (error) {
+        console.error('Error fetching workspace:', error)
+      }
+    }
+
+    fetchWorkspace()
+  }, [workspaceId, open])
+
   const handleDeleteAccount = async () => {
     if (!confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
       return
@@ -232,9 +275,12 @@ export function SettingsModal({ open, onOpenChange, user }: SettingsModalProps)
         </button>
         
         <button
+          onClick={() => setCurrentSection('members')}
           className={cn(
             "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
-            "hover:bg-gray-100 dark:hover:bg-gray-800"
+            currentSection === 'members' 
+              ? "bg-gray-200 dark:bg-gray-800" 
+              : "hover:bg-gray-100 dark:hover:bg-gray-800"
           )}
         >
           <Users className="h-4 w-4" />
@@ -597,6 +643,260 @@ export function SettingsModal({ open, onOpenChange, user }: SettingsModalProps)
     </div>
   )
 
+  const handleInviteMember = async () => {
+    if (!inviteEmail || !inviteEmail.includes('@')) {
+      toast.error('Please enter a valid email address')
+      return
+    }
+
+    if (!workspaceId) {
+      toast.error('No workspace selected')
+      return
+    }
+
+    setIsLoading(true)
+    try {
+      const response = await fetch(`/api/workspaces/${workspaceId}/members`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: inviteEmail, role: 'MEMBER' })
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        if (data.status === 'pending') {
+          toast.success(`Invitation sent to ${inviteEmail}`)
+        } else {
+          toast.success('Member added successfully')
+        }
+        setInviteEmail('')
+        fetchMembers()
+      } else {
+        const error = await response.json()
+        toast.error(error.error || 'Failed to invite member')
+      }
+    } catch (error) {
+      console.error('Error inviting member:', error)
+      toast.error('Failed to send invitation')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleUpdateMemberRole = async (memberId: string, newRole: string) => {
+    if (!workspaceId) return
+
+    try {
+      const response = await fetch(`/api/workspaces/${workspaceId}/members/${memberId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ role: newRole })
+      })
+
+      if (response.ok) {
+        toast.success('Member role updated')
+        fetchMembers()
+      } else {
+        const error = await response.json()
+        toast.error(error.error || 'Failed to update member role')
+      }
+    } catch (error) {
+      console.error('Error updating member role:', error)
+      toast.error('Failed to update member role')
+    }
+  }
+
+  const handleRemoveMember = async (memberId: string) => {
+    if (!confirm('Are you sure you want to remove this member?')) {
+      return
+    }
+
+    if (!workspaceId) return
+
+    try {
+      const response = await fetch(`/api/workspaces/${workspaceId}/members/${memberId}`, {
+        method: 'DELETE'
+      })
+
+      if (response.ok) {
+        toast.success('Member removed')
+        fetchMembers()
+      } else {
+        const error = await response.json()
+        toast.error(error.error || 'Failed to remove member')
+      }
+    } catch (error) {
+      console.error('Error removing member:', error)
+      toast.error('Failed to remove member')
+    }
+  }
+
+  const fetchMembers = async () => {
+    if (!workspaceId) {
+      setMembers([
+        { id: user?.id || '1', name: user?.name || 'You', email: user?.email, role: 'OWNER', avatarUrl: null },
+      ])
+      return
+    }
+
+    try {
+      const response = await fetch(`/api/workspaces/${workspaceId}/members`)
+      if (response.ok) {
+        const data = await response.json()
+        setMembers(data)
+      } else {
+        // Fallback to current user only
+        setMembers([
+          { id: user?.id || '1', name: user?.name || 'You', email: user?.email, role: 'OWNER', avatarUrl: null },
+        ])
+      }
+    } catch (error) {
+      console.error('Error fetching members:', error)
+      setMembers([
+        { id: user?.id || '1', name: user?.name || 'You', email: user?.email, role: 'OWNER', avatarUrl: null },
+      ])
+    }
+  }
+
+  // Fetch members when modal opens or workspace changes
+  useEffect(() => {
+    if (open && currentSection === 'members') {
+      fetchMembers()
+    }
+  }, [open, currentSection, workspaceId])
+
+  const renderMembersSettings = () => (
+    <div className="p-8">
+      <div className="mb-6">
+        <h2 className="text-2xl font-semibold mb-2">Members</h2>
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          Manage who has access to this workspace
+        </p>
+      </div>
+
+      {/* Invite Member */}
+      <div className="mb-8">
+        <Label className="text-sm font-medium mb-3 block">Invite people</Label>
+        <div className="flex gap-2">
+          <Input
+            type="email"
+            placeholder="Email address"
+            value={inviteEmail}
+            onChange={(e) => setInviteEmail(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleInviteMember()}
+            className="flex-1"
+          />
+          <Button 
+            onClick={handleInviteMember}
+            disabled={isLoading || !inviteEmail}
+          >
+            {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Invite'}
+          </Button>
+        </div>
+      </div>
+
+      <Separator className="mb-6" />
+
+      {/* Members List */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between mb-4">
+          <Label className="text-sm font-medium">Workspace members</Label>
+          <span className="text-sm text-gray-500 dark:text-gray-400">
+            {members.length} {members.length === 1 ? 'member' : 'members'}
+          </span>
+        </div>
+
+        <div className="space-y-2">
+          {members.map((member) => (
+            <div 
+              key={member.id}
+              className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900"
+            >
+              <div className="flex items-center gap-3">
+                <div className="h-8 w-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-sm font-bold">
+                  {member.name?.[0]?.toUpperCase() || member.email?.[0]?.toUpperCase()}
+                </div>
+                <div>
+                  <p className="text-sm font-medium">
+                    {member.name || 'Unknown'} 
+                    {member.id === user?.id && <span className="text-gray-500 ml-1">(you)</span>}
+                  </p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{member.email}</p>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <select
+                  value={member.role}
+                  onChange={(e) => handleUpdateMemberRole(member.id, e.target.value)}
+                  disabled={member.role === 'OWNER'}
+                  className="text-sm px-2 py-1 border rounded-md bg-white dark:bg-gray-800 disabled:opacity-50"
+                >
+                  <option value="OWNER">Owner</option>
+                  <option value="ADMIN">Admin</option>
+                  <option value="MEMBER">Member</option>
+                  <option value="GUEST">Guest</option>
+                </select>
+                
+                {member.role !== 'OWNER' && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemoveMember(member.id)}
+                    className="text-red-600 hover:text-red-700"
+                  >
+                    Remove
+                  </Button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Workspace Settings */}
+      <Separator className="my-8" />
+      
+      <div className="space-y-6">
+        <div>
+          <h3 className="text-sm font-medium mb-4">Workspace permissions</h3>
+          
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium">Allow members to invite</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  Members can invite new people to the workspace
+                </p>
+              </div>
+              <Switch />
+            </div>
+            
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium">Allow guests</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  Invite external users with limited access
+                </p>
+              </div>
+              <Switch />
+            </div>
+            
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium">Require admin approval</p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  New members need admin approval to join
+                </p>
+              </div>
+              <Switch />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
   const renderContent = () => {
     switch (currentSection) {
       case 'account':
@@ -611,6 +911,8 @@ export function SettingsModal({ open, onOpenChange, user }: SettingsModalProps)
         return renderSecuritySettings()
       case 'billing':
         return renderBillingSettings()
+      case 'members':
+        return renderMembersSettings()
       default:
         return renderAccountSettings()
     }

From 9f6e026f208f4e6e8cd7d85f3ba7346742ffd789 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 17:45:15 +0530
Subject: [PATCH 23/43] fixed socket based page updates

---
 app/(protected)/ClientLayout.tsx              |  11 +
 app/(protected)/layout.tsx                    |  15 +-
 .../page/[pageId]/PageEditorV2.tsx            |  78 +++++-
 components/collaboration/ActiveUsers.tsx      |  59 +++++
 components/editor/NotionEditor.tsx            |  84 +++++-
 components/page/notion-page-header.tsx        |  20 +-
 lib/socket/client.tsx                         | 178 +++++++++++++
 lib/socket/server.ts                          | 248 ++++++++++++++++++
 package.json                                  |   4 +-
 server.js                                     | 237 +++++++++++++++++
 10 files changed, 903 insertions(+), 31 deletions(-)
 create mode 100644 app/(protected)/ClientLayout.tsx
 create mode 100644 components/collaboration/ActiveUsers.tsx
 create mode 100644 lib/socket/client.tsx
 create mode 100644 lib/socket/server.ts
 create mode 100644 server.js

diff --git a/app/(protected)/ClientLayout.tsx b/app/(protected)/ClientLayout.tsx
new file mode 100644
index 0000000..a9849fd
--- /dev/null
+++ b/app/(protected)/ClientLayout.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import { SocketProvider } from '@/lib/socket/client'
+
+export function ClientLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <SocketProvider>
+      {children}
+    </SocketProvider>
+  )
+}
\ No newline at end of file
diff --git a/app/(protected)/layout.tsx b/app/(protected)/layout.tsx
index 8fabec8..91ca2b1 100644
--- a/app/(protected)/layout.tsx
+++ b/app/(protected)/layout.tsx
@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation"
 import { getCurrentUser } from "@/lib/auth"
 import { NotionSidebar } from "@/components/layout/notion-sidebar"
+import { ClientLayout } from "./ClientLayout"
 
 interface ProtectedLayoutProps {
   children: React.ReactNode
@@ -14,11 +15,13 @@ export default async function ProtectedLayout({ children }: ProtectedLayoutProps
   }
 
   return (
-    <div className="flex h-screen bg-white dark:bg-[#191919]">
-      <NotionSidebar user={user} />
-      <main className="flex-1 overflow-auto">
-        {children}
-      </main>
-    </div>
+    <ClientLayout>
+      <div className="flex h-screen bg-white dark:bg-[#191919]">
+        <NotionSidebar user={user} />
+        <main className="flex-1 overflow-auto">
+          {children}
+        </main>
+      </div>
+    </ClientLayout>
   )
 }
\ No newline at end of file
diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
index f2f0662..dad19bc 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
@@ -7,6 +7,8 @@ import dynamic from 'next/dynamic'
 import { NotionPageHeader } from '@/components/page/notion-page-header'
 import { cn } from '@/lib/utils'
 import toast from 'react-hot-toast'
+import { useSocket } from '@/lib/socket/client'
+import { ActiveUsers } from '@/components/collaboration/ActiveUsers'
 
 // Dynamically import NotionEditor to avoid SSR hydration issues with DnD
 const NotionEditor = dynamic(
@@ -64,6 +66,7 @@ interface PageEditorProps {
 
 export default function PageEditorV2({ page, initialContent, user }: PageEditorProps) {
   const router = useRouter()
+  const { socket, isConnected, currentUsers, joinPage, sendContentUpdate } = useSocket()
   const [title, setTitle] = useState(page.title || '')
   const [icon, setIcon] = useState(page.icon || '')
   const [coverImage, setCoverImage] = useState(page.coverImage || '')
@@ -71,11 +74,55 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
   const [showIconPicker, setShowIconPicker] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
   const [lastUpdated, setLastUpdated] = useState(page.updatedAt)
+  const [blocks, setBlocks] = useState<Block[]>(initialContent?.blocks || [])
+  const [remoteUpdate, setRemoteUpdate] = useState(0)
+  const lastBroadcastRef = useRef<string>('')
+  const isReceivingUpdate = useRef(false)
   const titleRef = useRef<HTMLTextAreaElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   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
+      })
+    }
+  }, [isConnected, page.id, page.workspaceId, user, joinPage])
+
+  // Listen for content updates from other users
+  useEffect(() => {
+    if (!socket) return
+
+    const handleContentUpdated = (data: { blocks: Block[], userId: string, timestamp: string }) => {
+      // Only process updates from other users
+      if (data.userId !== user?.id) {
+        console.log('Received content update from user:', data.userId)
+        isReceivingUpdate.current = true
+        setRemoteUpdate(prev => prev + 1)
+        setBlocks(data.blocks)
+        setLastUpdated(data.timestamp)
+        
+        // Don't show toast for every update - it's distracting
+        // Only show for significant changes
+        setTimeout(() => {
+          isReceivingUpdate.current = false
+        }, 500)
+      }
+    }
+
+    socket.on('content-updated', handleContentUpdated)
+
+    return () => {
+      socket.off('content-updated', handleContentUpdated)
+    }
+  }, [socket, user?.id])
+
   // Auto-resize title textarea
   useEffect(() => {
     if (titleRef.current) {
@@ -126,9 +173,29 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
     return () => clearTimeout(timeoutId)
   }, [title, page.title, saveTitle])
 
-  // Auto-save page content
-  const handleAutoSave = useCallback(async (blocks: Block[]) => {
+  // Auto-save page content and broadcast to other users
+  const handleAutoSave = useCallback(async (newBlocks: Block[]) => {
+    // Don't save if we're receiving an update from another user
+    if (isReceivingUpdate.current) {
+      console.log('Skipping save - receiving remote update')
+      return
+    }
+    
+    // Check if content actually changed by comparing serialized blocks
+    const serializedBlocks = JSON.stringify(newBlocks)
+    if (serializedBlocks === lastBroadcastRef.current) {
+      console.log('Skipping save - no actual changes')
+      return
+    }
+    
     setIsSaving(true)
+    setBlocks(newBlocks)
+    
+    // Broadcast to other users immediately if content changed
+    if (user && serializedBlocks !== lastBroadcastRef.current) {
+      sendContentUpdate(page.id, newBlocks, user.id)
+      lastBroadcastRef.current = serializedBlocks
+    }
     
     try {
       const response = await fetch(`/api/pages/${page.id}/content`, {
@@ -137,7 +204,7 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          blocks
+          blocks: newBlocks
         }),
       })
 
@@ -154,7 +221,7 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
     } finally {
       setIsSaving(false)
     }
-  }, [page.id])
+  }, [page.id, user, sendContentUpdate])
 
   const handleAddIcon = () => {
     // For now, just set a random emoji
@@ -299,8 +366,9 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
           {/* Editor */}
           <div className="mt-2">
             <NotionEditor
+              key={`editor-${remoteUpdate}`}
               pageId={page.id}
-              initialBlocks={initialBlocks}
+              initialBlocks={blocks.length > 0 ? blocks : initialBlocks}
               onAutoSave={handleAutoSave}
               showSaveStatus={false}
               autoSaveInterval={2000}
diff --git a/components/collaboration/ActiveUsers.tsx b/components/collaboration/ActiveUsers.tsx
new file mode 100644
index 0000000..4be2d03
--- /dev/null
+++ b/components/collaboration/ActiveUsers.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import React from 'react'
+import { useSocket } from '@/lib/socket/client'
+import { cn } from '@/lib/utils'
+
+export function ActiveUsers() {
+  const { currentUsers, isConnected } = useSocket()
+
+  // Don't show if not connected or no other users
+  if (!isConnected) {
+    return null
+  }
+
+  // Total users includes current user + other users
+  const totalUsers = currentUsers.size + 1
+
+  return (
+    <div className="flex items-center gap-2">
+      {currentUsers.size > 0 && (
+        <div className="flex -space-x-2">
+          {Array.from(currentUsers.entries()).slice(0, 5).map(([socketId, user], index) => (
+          <div
+            key={socketId}
+            className="relative group"
+            style={{ zIndex: 5 - index }}
+          >
+            <div
+              className={cn(
+                "h-7 w-7 rounded-full flex items-center justify-center text-xs font-medium text-white ring-2 ring-white dark:ring-gray-900",
+                "hover:scale-110 transition-transform cursor-pointer"
+              )}
+              style={{ backgroundColor: user.color }}
+              title={user.name || user.email}
+            >
+              {(user.name || user.email)?.[0]?.toUpperCase() || '?'}
+            </div>
+            
+            {/* Tooltip */}
+            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">
+              {user.name || user.email}
+            </div>
+          </div>
+        ))}
+        
+          {currentUsers.size > 5 && (
+            <div className="h-7 w-7 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs font-medium ring-2 ring-white dark:ring-gray-900">
+              +{currentUsers.size - 5}
+            </div>
+          )}
+        </div>
+      )}
+      
+      <span className="text-xs text-gray-500 dark:text-gray-400">
+        {totalUsers === 1 ? 'Just you' : `${totalUsers} users online`}
+      </span>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/components/editor/NotionEditor.tsx b/components/editor/NotionEditor.tsx
index a0c76e4..a31d080 100644
--- a/components/editor/NotionEditor.tsx
+++ b/components/editor/NotionEditor.tsx
@@ -95,12 +95,64 @@ export default function NotionEditor({
   const autoSaveTimeoutRef = useRef<NodeJS.Timeout>()
   
   const { blocks } = editorState
+  const previousBlocksRef = useRef<BlockType[]>(initialBlocks)
+  const hasLocalChanges = useRef(false)
+  const isProcessingRemoteUpdate = useRef(false)
+  
+  // Update blocks when initialBlocks change (for real-time collaboration)
+  const previousInitialBlocksRef = useRef(initialBlocks)
+  useEffect(() => {
+    // Only update if blocks are actually different and we don't have local changes
+    // and we're not already processing a remote update
+    if (!hasLocalChanges.current && !isProcessingRemoteUpdate.current) {
+      const blocksChanged = JSON.stringify(initialBlocks) !== JSON.stringify(previousInitialBlocksRef.current)
+      if (blocksChanged) {
+        isProcessingRemoteUpdate.current = true
+        dispatch({ type: 'SET_BLOCKS', payload: initialBlocks })
+        previousInitialBlocksRef.current = initialBlocks
+        previousBlocksRef.current = initialBlocks
+        // Reset flag after a short delay
+        setTimeout(() => {
+          isProcessingRemoteUpdate.current = false
+        }, 100)
+      }
+    }
+  }, [initialBlocks])
 
   // Auto-save functionality
   const performAutoSave = useCallback(async () => {
-    if (readOnly || blocks.length === 0) return
+    if (readOnly || blocks.length === 0 || isProcessingRemoteUpdate.current) return
+    
+    // Deep comparison to check if there are actual content changes
+    const hasContentChanges = () => {
+      if (blocks.length !== previousBlocksRef.current.length) return true
+      
+      for (let i = 0; i < blocks.length; i++) {
+        const current = blocks[i]
+        const previous = previousBlocksRef.current[i]
+        
+        // Check if block IDs or types changed
+        if (current.id !== previous.id || current.type !== previous.type) return true
+        
+        // Check content changes
+        if (JSON.stringify(current.content) !== JSON.stringify(previous.content)) return true
+        
+        // Check properties changes (for lists, etc.)
+        if (JSON.stringify(current.properties) !== JSON.stringify(previous.properties)) return true
+      }
+      
+      return false
+    }
+    
+    if (!hasContentChanges()) {
+      if (saveStatus === 'unsaved') {
+        setSaveStatus('saved')
+      }
+      return
+    }
     
     setSaveStatus('saving')
+    hasLocalChanges.current = true
     
     try {
       if (onAutoSave) {
@@ -109,25 +161,37 @@ export default function NotionEditor({
         onSave(blocks)
       }
       setSaveStatus('saved')
+      previousBlocksRef.current = [...blocks] // Create a new array reference
+      
+      // Reset local changes flag after successful save
+      setTimeout(() => {
+        hasLocalChanges.current = false
+      }, 100)
     } catch (error) {
       console.error('Auto-save failed:', error)
       setSaveStatus('error')
       toast.error('Failed to save changes')
     }
-  }, [blocks, onAutoSave, onSave, readOnly])
+  }, [blocks, onAutoSave, onSave, readOnly, saveStatus])
 
   // Auto-save effect
   useEffect(() => {
-    if (!readOnly && blocks.length > 0) {
-      setSaveStatus('unsaved')
+    if (!readOnly && blocks.length > 0 && !isProcessingRemoteUpdate.current) {
+      // Only check for changes if we're not processing a remote update
+      const hasChanges = JSON.stringify(blocks) !== JSON.stringify(previousBlocksRef.current)
       
-      if (autoSaveTimeoutRef.current) {
-        clearTimeout(autoSaveTimeoutRef.current)
+      if (hasChanges) {
+        setSaveStatus('unsaved')
+        hasLocalChanges.current = true
+        
+        if (autoSaveTimeoutRef.current) {
+          clearTimeout(autoSaveTimeoutRef.current)
+        }
+        
+        autoSaveTimeoutRef.current = setTimeout(() => {
+          performAutoSave()
+        }, autoSaveInterval)
       }
-      
-      autoSaveTimeoutRef.current = setTimeout(() => {
-        performAutoSave()
-      }, autoSaveInterval)
     }
     
     return () => {
diff --git a/components/page/notion-page-header.tsx b/components/page/notion-page-header.tsx
index d2a76b9..886fa4a 100644
--- a/components/page/notion-page-header.tsx
+++ b/components/page/notion-page-header.tsx
@@ -37,6 +37,7 @@ import {
 } from "lucide-react"
 import toast from "react-hot-toast"
 import { cn } from "@/lib/utils"
+import { ActiveUsers } from "@/components/collaboration/ActiveUsers"
 
 interface NotionPageHeaderProps {
   page: any
@@ -321,14 +322,16 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
         )}
 
           {/* Top Bar Actions */}
-          <div className="flex items-center justify-end gap-2 py-2 text-sm text-[#37352f80]">
-            <div className="flex items-center gap-1 px-2 py-1">
-              <span className="text-[#37352f80]">Edited</span>
-              <span className="text-[#37352f99]">{editedTime}</span>
-            </div>
-            <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
-              Share
-            </button>
+          <div className="flex items-center justify-between gap-2 py-2 text-sm text-[#37352f80]">
+            <ActiveUsers />
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1 px-2 py-1">
+                <span className="text-[#37352f80]">Edited</span>
+                <span className="text-[#37352f99]">{editedTime}</span>
+              </div>
+              <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
+                Share
+              </button>
             <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
               <MessageSquare className="h-4 w-4" />
             </button>
@@ -370,6 +373,7 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
+            </div>
           </div>
         </div>
       </div>
diff --git a/lib/socket/client.tsx b/lib/socket/client.tsx
new file mode 100644
index 0000000..9c38e71
--- /dev/null
+++ b/lib/socket/client.tsx
@@ -0,0 +1,178 @@
+'use client'
+
+import { createContext, useContext, useEffect, useState, useRef, ReactNode, useCallback } from 'react'
+import io, { Socket } from 'socket.io-client'
+import { UserPresence } from './server'
+
+interface SocketContextType {
+  socket: Socket | null
+  isConnected: boolean
+  currentUsers: Map<string, UserPresence>
+  joinPage: (pageId: string, workspaceId: string, user: any) => void
+  sendContentUpdate: (pageId: string, blocks: any[], userId: string) => void
+  sendCursorPosition: (pageId: string, position: { x: number; y: number }) => void
+  sendSelection: (pageId: string, selection: { start: number; end: number } | null) => void
+  sendTypingStart: (pageId: string, blockId: string) => void
+  sendTypingStop: (pageId: string, blockId: string) => void
+}
+
+const SocketContext = createContext<SocketContextType>({
+  socket: null,
+  isConnected: false,
+  currentUsers: new Map(),
+  joinPage: () => {},
+  sendContentUpdate: () => {},
+  sendCursorPosition: () => {},
+  sendSelection: () => {},
+  sendTypingStart: () => {},
+  sendTypingStop: () => {},
+})
+
+export function SocketProvider({ children }: { children: ReactNode }) {
+  const [socket, setSocket] = useState<Socket | null>(null)
+  const [isConnected, setIsConnected] = useState(false)
+  const [currentUsers, setCurrentUsers] = useState<Map<string, UserPresence>>(new Map())
+  const socketRef = useRef<Socket | null>(null)
+
+  useEffect(() => {
+    // Only create socket once
+    if (socketRef.current) return
+
+    const socketInstance = io(process.env.NEXT_PUBLIC_SOCKET_URL || 'http://localhost:3000', {
+      withCredentials: true,
+      transports: ['websocket', 'polling']
+    })
+
+    socketRef.current = socketInstance
+
+    const handleConnect = () => {
+      console.log('Connected to Socket.io server')
+      setIsConnected(true)
+    }
+
+    const handleDisconnect = () => {
+      console.log('Disconnected from Socket.io server')
+      setIsConnected(false)
+      setCurrentUsers(new Map())
+    }
+
+    const handleCurrentUsers = (users: any[]) => {
+      if (!Array.isArray(users)) return
+      
+      requestAnimationFrame(() => {
+        setCurrentUsers(() => {
+          const userMap = new Map<string, UserPresence>()
+          users.forEach(user => {
+            if (user?.socketId) {
+              userMap.set(user.socketId, user)
+            }
+          })
+          return userMap
+        })
+      })
+    }
+
+    const handleUserJoined = (data: { socketId: string; user: UserPresence }) => {
+      if (!data?.socketId || !data?.user) return
+      
+      requestAnimationFrame(() => {
+        setCurrentUsers(prev => {
+          const newMap = new Map(prev)
+          newMap.set(data.socketId, data.user)
+          return newMap
+        })
+      })
+    }
+
+    const handleUserLeft = (data: { socketId: string }) => {
+      if (!data?.socketId) return
+      
+      requestAnimationFrame(() => {
+        setCurrentUsers(prev => {
+          const newMap = new Map(prev)
+          newMap.delete(data.socketId)
+          return newMap
+        })
+      })
+    }
+
+    socketInstance.on('connect', handleConnect)
+    socketInstance.on('disconnect', handleDisconnect)
+    socketInstance.on('current-users', handleCurrentUsers)
+    socketInstance.on('user-joined', handleUserJoined)
+    socketInstance.on('user-left', handleUserLeft)
+
+    setSocket(socketInstance)
+
+    return () => {
+      socketInstance.off('connect', handleConnect)
+      socketInstance.off('disconnect', handleDisconnect)
+      socketInstance.off('current-users', handleCurrentUsers)
+      socketInstance.off('user-joined', handleUserJoined)
+      socketInstance.off('user-left', handleUserLeft)
+      socketInstance.disconnect()
+      socketRef.current = null
+    }
+  }, [])
+
+  const joinPage = useCallback((pageId: string, workspaceId: string, user: any) => {
+    if (socket && socket.connected) {
+      socket.emit('join-page', { pageId, workspaceId, user })
+    }
+  }, [socket])
+
+  const lastContentUpdate = useRef<string>('')
+  
+  const sendContentUpdate = useCallback((pageId: string, blocks: any[], userId: string) => {
+    if (socket && socket.connected) {
+      // Only send if content actually changed
+      const contentHash = JSON.stringify({ pageId, blocks, userId })
+      if (contentHash !== lastContentUpdate.current) {
+        socket.emit('content-update', { pageId, blocks, userId })
+        lastContentUpdate.current = contentHash
+      }
+    }
+  }, [socket])
+
+  const sendCursorPosition = useCallback((pageId: string, position: { x: number; y: number }) => {
+    if (socket && socket.connected) {
+      socket.emit('cursor-move', { pageId, position })
+    }
+  }, [socket])
+
+  const sendSelection = useCallback((pageId: string, selection: { start: number; end: number } | null) => {
+    if (socket && socket.connected) {
+      socket.emit('selection-change', { pageId, selection })
+    }
+  }, [socket])
+
+  const sendTypingStart = useCallback((pageId: string, blockId: string) => {
+    if (socket && socket.connected) {
+      socket.emit('typing-start', { pageId, blockId })
+    }
+  }, [socket])
+
+  const sendTypingStop = useCallback((pageId: string, blockId: string) => {
+    if (socket && socket.connected) {
+      socket.emit('typing-stop', { pageId, blockId })
+    }
+  }, [socket])
+
+  return (
+    <SocketContext.Provider value={{
+      socket,
+      isConnected,
+      currentUsers,
+      joinPage,
+      sendContentUpdate,
+      sendCursorPosition,
+      sendSelection,
+      sendTypingStart,
+      sendTypingStop
+    }}>
+      {children}
+    </SocketContext.Provider>
+  )
+}
+
+export const useSocket = () => useContext(SocketContext)
\ No newline at end of file
diff --git a/lib/socket/server.ts b/lib/socket/server.ts
new file mode 100644
index 0000000..4432449
--- /dev/null
+++ b/lib/socket/server.ts
@@ -0,0 +1,248 @@
+import { Server as HTTPServer } from 'http'
+import { Server as SocketIOServer } from 'socket.io'
+import { prisma } from '@/lib/db/prisma'
+
+export interface UserPresence {
+  userId: string
+  name: string
+  email: string
+  avatarUrl?: string | null
+  cursorPosition?: { x: number; y: number }
+  selection?: { start: number; end: number }
+  color: string
+}
+
+export interface PageRoom {
+  pageId: string
+  workspaceId: string
+  users: Map<string, UserPresence>
+}
+
+class SocketServer {
+  private io: SocketIOServer | null = null
+  private pageRooms: Map<string, PageRoom> = new Map()
+  private userColors = [
+    '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', 
+    '#98D8C8', '#A8E6CF', '#FFD3B6', '#FFAAA5'
+  ]
+  private colorIndex = 0
+
+  initialize(server: HTTPServer) {
+    if (this.io) return this.io
+
+    this.io = new SocketIOServer(server, {
+      cors: {
+        origin: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',
+        methods: ['GET', 'POST'],
+        credentials: true
+      }
+    })
+
+    this.io.on('connection', (socket) => {
+      console.log('User connected:', socket.id)
+
+      // Join a page room
+      socket.on('join-page', async (data: { 
+        pageId: string
+        workspaceId: string
+        user: { id: string; name: string; email: string; avatarUrl?: string }
+      }) => {
+        const { pageId, workspaceId, user } = data
+        const roomId = `page:${pageId}`
+
+        // Verify user has access to this page
+        const hasAccess = await this.verifyPageAccess(user.id, workspaceId)
+        if (!hasAccess) {
+          socket.emit('error', { message: 'Access denied' })
+          return
+        }
+
+        // Leave previous rooms
+        const rooms = Array.from(socket.rooms)
+        rooms.forEach(room => {
+          if (room !== socket.id && room.startsWith('page:')) {
+            socket.leave(room)
+            this.removeUserFromRoom(room, socket.id)
+          }
+        })
+
+        // Join new room
+        socket.join(roomId)
+
+        // Initialize room if needed
+        if (!this.pageRooms.has(roomId)) {
+          this.pageRooms.set(roomId, {
+            pageId,
+            workspaceId,
+            users: new Map()
+          })
+        }
+
+        // Add user to room
+        const room = this.pageRooms.get(roomId)!
+        const userPresence: UserPresence = {
+          ...user,
+          color: this.getUserColor()
+        }
+        room.users.set(socket.id, userPresence)
+
+        // Notify others in the room
+        socket.to(roomId).emit('user-joined', {
+          socketId: socket.id,
+          user: userPresence
+        })
+
+        // Send current users to the new user
+        const currentUsers = Array.from(room.users.entries()).map(([id, user]) => ({
+          socketId: id,
+          ...user
+        }))
+        socket.emit('current-users', currentUsers)
+      })
+
+      // Handle content updates
+      socket.on('content-update', async (data: {
+        pageId: string
+        blocks: any[]
+        userId: string
+      }) => {
+        const roomId = `page:${data.pageId}`
+        
+        // Broadcast to all other users in the room
+        socket.to(roomId).emit('content-updated', {
+          blocks: data.blocks,
+          userId: data.userId,
+          timestamp: new Date().toISOString()
+        })
+      })
+
+      // Handle cursor movement
+      socket.on('cursor-move', (data: {
+        pageId: string
+        position: { x: number; y: number }
+      }) => {
+        const roomId = `page:${data.pageId}`
+        const room = this.pageRooms.get(roomId)
+        
+        if (room && room.users.has(socket.id)) {
+          const user = room.users.get(socket.id)!
+          user.cursorPosition = data.position
+
+          // Broadcast cursor position to others
+          socket.to(roomId).emit('cursor-moved', {
+            socketId: socket.id,
+            position: data.position,
+            user: user
+          })
+        }
+      })
+
+      // Handle selection changes
+      socket.on('selection-change', (data: {
+        pageId: string
+        selection: { start: number; end: number } | null
+      }) => {
+        const roomId = `page:${data.pageId}`
+        const room = this.pageRooms.get(roomId)
+        
+        if (room && room.users.has(socket.id)) {
+          const user = room.users.get(socket.id)!
+          user.selection = data.selection || undefined
+
+          // Broadcast selection to others
+          socket.to(roomId).emit('selection-changed', {
+            socketId: socket.id,
+            selection: data.selection,
+            user: user
+          })
+        }
+      })
+
+      // Handle typing indicator
+      socket.on('typing-start', (data: { pageId: string; blockId: string }) => {
+        const roomId = `page:${data.pageId}`
+        const room = this.pageRooms.get(roomId)
+        
+        if (room && room.users.has(socket.id)) {
+          const user = room.users.get(socket.id)!
+          
+          socket.to(roomId).emit('user-typing', {
+            socketId: socket.id,
+            blockId: data.blockId,
+            user: user
+          })
+        }
+      })
+
+      socket.on('typing-stop', (data: { pageId: string; blockId: string }) => {
+        const roomId = `page:${data.pageId}`
+        
+        socket.to(roomId).emit('user-stopped-typing', {
+          socketId: socket.id,
+          blockId: data.blockId
+        })
+      })
+
+      // Handle disconnect
+      socket.on('disconnect', () => {
+        console.log('User disconnected:', socket.id)
+
+        // Remove from all page rooms
+        const rooms = Array.from(socket.rooms)
+        rooms.forEach(room => {
+          if (room.startsWith('page:')) {
+            this.removeUserFromRoom(room, socket.id)
+            
+            // Notify others
+            socket.to(room).emit('user-left', {
+              socketId: socket.id
+            })
+          }
+        })
+      })
+    })
+
+    return this.io
+  }
+
+  private async verifyPageAccess(userId: string, workspaceId: string): Promise<boolean> {
+    try {
+      const member = await prisma.workspaceMember.findUnique({
+        where: {
+          userId_workspaceId: {
+            userId,
+            workspaceId
+          }
+        }
+      })
+      return !!member
+    } catch (error) {
+      console.error('Error verifying page access:', error)
+      return false
+    }
+  }
+
+  private removeUserFromRoom(roomId: string, socketId: string) {
+    const room = this.pageRooms.get(roomId)
+    if (room) {
+      room.users.delete(socketId)
+      
+      // Clean up empty rooms
+      if (room.users.size === 0) {
+        this.pageRooms.delete(roomId)
+      }
+    }
+  }
+
+  private getUserColor(): string {
+    const color = this.userColors[this.colorIndex % this.userColors.length]
+    this.colorIndex++
+    return color
+  }
+
+  getIO() {
+    return this.io
+  }
+}
+
+export const socketServer = new SocketServer()
\ No newline at end of file
diff --git a/package.json b/package.json
index 247aaed..9722f12 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "node server.js",
     "build": "next build",
-    "start": "next start",
+    "start": "NODE_ENV=production node server.js",
     "lint": "next lint",
     "typecheck": "tsc --noEmit",
     "format": "prettier --write .",
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..7c441d0
--- /dev/null
+++ b/server.js
@@ -0,0 +1,237 @@
+const { createServer } = require('http')
+const { parse } = require('url')
+const next = require('next')
+const { Server } = require('socket.io')
+
+const dev = process.env.NODE_ENV !== 'production'
+const hostname = 'localhost'
+const port = 3000
+
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare().then(() => {
+  const server = createServer(async (req, res) => {
+    try {
+      const parsedUrl = parse(req.url, true)
+      await handle(req, res, parsedUrl)
+    } catch (err) {
+      console.error('Error occurred handling', req.url, err)
+      res.statusCode = 500
+      res.end('internal server error')
+    }
+  })
+
+  // Initialize Socket.io
+  const io = new Server(server, {
+    cors: {
+      origin: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',
+      methods: ['GET', 'POST'],
+      credentials: true
+    }
+  })
+
+  const pageRooms = new Map()
+  const userColors = [
+    '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', 
+    '#98D8C8', '#A8E6CF', '#FFD3B6', '#FFAAA5'
+  ]
+  let colorIndex = 0
+
+  const getUserColor = () => {
+    const color = userColors[colorIndex % userColors.length]
+    colorIndex++
+    return color
+  }
+
+  io.on('connection', (socket) => {
+    console.log('User connected:', socket.id)
+
+    // Join a page room
+    socket.on('join-page', async (data) => {
+      console.log('User joining page:', data)
+      const { pageId, workspaceId, user } = data
+      const roomId = `page:${pageId}`
+
+      // Leave previous rooms
+      const rooms = Array.from(socket.rooms)
+      rooms.forEach(room => {
+        if (room !== socket.id && room.startsWith('page:')) {
+          socket.leave(room)
+          removeUserFromRoom(room, socket.id)
+          
+          // Notify users in the old room
+          io.to(room).emit('user-left', {
+            socketId: socket.id
+          })
+        }
+      })
+
+      // Join new room
+      socket.join(roomId)
+
+      // Initialize room if needed
+      if (!pageRooms.has(roomId)) {
+        pageRooms.set(roomId, {
+          pageId,
+          workspaceId,
+          users: new Map()
+        })
+      }
+
+      // Add user to room
+      const room = pageRooms.get(roomId)
+      const userPresence = {
+        userId: user.id,
+        name: user.name,
+        email: user.email,
+        avatarUrl: user.avatarUrl,
+        socketId: socket.id,
+        color: getUserColor()
+      }
+      room.users.set(socket.id, userPresence)
+
+      // Send current users to the new user (excluding themselves)
+      const currentUsers = Array.from(room.users.entries())
+        .filter(([id]) => id !== socket.id)
+        .map(([id, userData]) => ({
+          socketId: id,
+          ...userData
+        }))
+      socket.emit('current-users', currentUsers)
+
+      // Notify others in the room
+      socket.to(roomId).emit('user-joined', {
+        socketId: socket.id,
+        user: userPresence
+      })
+      
+      console.log(`User ${user.name} joined room ${roomId}. Total users: ${room.users.size}`)
+    })
+
+    // Handle content updates
+    socket.on('content-update', (data) => {
+      const roomId = `page:${data.pageId}`
+      const room = pageRooms.get(roomId)
+      
+      if (room) {
+        const otherUsers = room.users.size - 1
+        if (otherUsers > 0) {
+          console.log(`[${new Date().toISOString()}] Content update in room ${roomId} from user ${data.userId}. Broadcasting to ${otherUsers} other users`)
+          
+          // Broadcast to all other users in the room
+          socket.to(roomId).emit('content-updated', {
+            blocks: data.blocks,
+            userId: data.userId,
+            timestamp: new Date().toISOString()
+          })
+        }
+      } else {
+        console.log(`Warning: Content update for non-existent room ${roomId}`)
+      }
+    })
+
+    // Handle cursor movement
+    socket.on('cursor-move', (data) => {
+      const roomId = `page:${data.pageId}`
+      const room = pageRooms.get(roomId)
+      
+      if (room && room.users.has(socket.id)) {
+        const user = room.users.get(socket.id)
+        user.cursorPosition = data.position
+
+        // Broadcast cursor position to others
+        socket.to(roomId).emit('cursor-moved', {
+          socketId: socket.id,
+          position: data.position,
+          user: user
+        })
+      }
+    })
+
+    // Handle selection changes
+    socket.on('selection-change', (data) => {
+      const roomId = `page:${data.pageId}`
+      const room = pageRooms.get(roomId)
+      
+      if (room && room.users.has(socket.id)) {
+        const user = room.users.get(socket.id)
+        user.selection = data.selection
+
+        // Broadcast selection to others
+        socket.to(roomId).emit('selection-changed', {
+          socketId: socket.id,
+          selection: data.selection,
+          user: user
+        })
+      }
+    })
+
+    // Handle typing indicator
+    socket.on('typing-start', (data) => {
+      const roomId = `page:${data.pageId}`
+      const room = pageRooms.get(roomId)
+      
+      if (room && room.users.has(socket.id)) {
+        const user = room.users.get(socket.id)
+        
+        socket.to(roomId).emit('user-typing', {
+          socketId: socket.id,
+          blockId: data.blockId,
+          user: user
+        })
+      }
+    })
+
+    socket.on('typing-stop', (data) => {
+      const roomId = `page:${data.pageId}`
+      
+      socket.to(roomId).emit('user-stopped-typing', {
+        socketId: socket.id,
+        blockId: data.blockId
+      })
+    })
+
+    // Handle disconnect
+    socket.on('disconnect', () => {
+      console.log('User disconnected:', socket.id)
+
+      // Remove from all page rooms
+      pageRooms.forEach((room, roomId) => {
+        if (room.users.has(socket.id)) {
+          const user = room.users.get(socket.id)
+          room.users.delete(socket.id)
+          
+          // Notify others in the room
+          io.to(roomId).emit('user-left', {
+            socketId: socket.id
+          })
+          
+          console.log(`User ${user?.name} left room ${roomId}. Remaining users: ${room.users.size}`)
+          
+          // Clean up empty rooms
+          if (room.users.size === 0) {
+            pageRooms.delete(roomId)
+          }
+        }
+      })
+    })
+  })
+
+  const removeUserFromRoom = (roomId, socketId) => {
+    const room = pageRooms.get(roomId)
+    if (room) {
+      room.users.delete(socketId)
+      
+      // Clean up empty rooms
+      if (room.users.size === 0) {
+        pageRooms.delete(roomId)
+      }
+    }
+  }
+
+  server.listen(port, (err) => {
+    if (err) throw err
+    console.log(`> Ready on http://${hostname}:${port}`)
+  })
+})
\ No newline at end of file

From d34141238450cffb1a8d6c3027baa007f20c52fa Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 18:40:24 +0530
Subject: [PATCH 24/43] fixed user login

---
 .../page/[pageId]/PageEditorV2.tsx            |  16 +-
 components/collaboration/ActiveUsers.tsx      |  19 +-
 lib/socket/client.tsx                         |  34 ++-
 server.js                                     | 225 ++++++------------
 4 files changed, 117 insertions(+), 177 deletions(-)

diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
index dad19bc..aac59e8 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
@@ -66,7 +66,7 @@ interface PageEditorProps {
 
 export default function PageEditorV2({ page, initialContent, user }: PageEditorProps) {
   const router = useRouter()
-  const { socket, isConnected, currentUsers, joinPage, sendContentUpdate } = useSocket()
+  const { socket, isConnected, currentUsers, joinPage, leavePage, sendContentUpdate } = useSocket()
   const [title, setTitle] = useState(page.title || '')
   const [icon, setIcon] = useState(page.icon || '')
   const [coverImage, setCoverImage] = useState(page.coverImage || '')
@@ -93,7 +93,12 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
         avatarUrl: null
       })
     }
-  }, [isConnected, page.id, page.workspaceId, user, joinPage])
+    
+    // Clean up when leaving the page
+    return () => {
+      leavePage()
+    }
+  }, [isConnected, page.id, page.workspaceId, user, joinPage, leavePage])
 
   // Listen for content updates from other users
   useEffect(() => {
@@ -331,6 +336,13 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
 
   return (
     <div className="min-h-screen bg-white dark:bg-[#191919]">
+      {/* Active users indicator */}
+      {isConnected && (
+        <div className="fixed top-4 right-4 z-50">
+          <ActiveUsers />
+        </div>
+      )}
+      
       {/* Notion-style Page Header */}
       <NotionPageHeader 
         page={{...page, icon, coverImage, updatedAt: lastUpdated}} 
diff --git a/components/collaboration/ActiveUsers.tsx b/components/collaboration/ActiveUsers.tsx
index 4be2d03..a47ccf6 100644
--- a/components/collaboration/ActiveUsers.tsx
+++ b/components/collaboration/ActiveUsers.tsx
@@ -5,23 +5,24 @@ import { useSocket } from '@/lib/socket/client'
 import { cn } from '@/lib/utils'
 
 export function ActiveUsers() {
-  const { currentUsers, isConnected } = useSocket()
+  const { currentUsers, isConnected, currentPageId } = useSocket()
 
-  // Don't show if not connected or no other users
-  if (!isConnected) {
+  // Don't show if not connected or not on a page
+  if (!isConnected || !currentPageId) {
     return null
   }
 
-  // Total users includes current user + other users
+  // Current users already contains only OTHER users (not including current user)
+  // So total = other users + 1 (current user)
   const totalUsers = currentUsers.size + 1
 
   return (
     <div className="flex items-center gap-2">
       {currentUsers.size > 0 && (
         <div className="flex -space-x-2">
-          {Array.from(currentUsers.entries()).slice(0, 5).map(([socketId, user], index) => (
+          {Array.from(currentUsers.entries()).slice(0, 5).map(([userId, user], index) => (
           <div
-            key={socketId}
+            key={userId}
             className="relative group"
             style={{ zIndex: 5 - index }}
           >
@@ -30,14 +31,14 @@ export function ActiveUsers() {
                 "h-7 w-7 rounded-full flex items-center justify-center text-xs font-medium text-white ring-2 ring-white dark:ring-gray-900",
                 "hover:scale-110 transition-transform cursor-pointer"
               )}
-              style={{ backgroundColor: user.color }}
+              style={{ backgroundColor: user.color || '#4ECDC4' }}
               title={user.name || user.email}
             >
               {(user.name || user.email)?.[0]?.toUpperCase() || '?'}
             </div>
             
             {/* Tooltip */}
-            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">
+            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-50">
               {user.name || user.email}
             </div>
           </div>
@@ -52,7 +53,7 @@ export function ActiveUsers() {
       )}
       
       <span className="text-xs text-gray-500 dark:text-gray-400">
-        {totalUsers === 1 ? 'Just you' : `${totalUsers} users online`}
+        {totalUsers === 1 ? 'Just you' : `${totalUsers} ${totalUsers === 2 ? 'user' : 'users'} on this page`}
       </span>
     </div>
   )
diff --git a/lib/socket/client.tsx b/lib/socket/client.tsx
index 9c38e71..ac5e156 100644
--- a/lib/socket/client.tsx
+++ b/lib/socket/client.tsx
@@ -8,7 +8,9 @@ interface SocketContextType {
   socket: Socket | null
   isConnected: boolean
   currentUsers: Map<string, UserPresence>
+  currentPageId: string | null
   joinPage: (pageId: string, workspaceId: string, user: any) => void
+  leavePage: () => void
   sendContentUpdate: (pageId: string, blocks: any[], userId: string) => void
   sendCursorPosition: (pageId: string, position: { x: number; y: number }) => void
   sendSelection: (pageId: string, selection: { start: number; end: number } | null) => void
@@ -20,7 +22,9 @@ const SocketContext = createContext<SocketContextType>({
   socket: null,
   isConnected: false,
   currentUsers: new Map(),
+  currentPageId: null,
   joinPage: () => {},
+  leavePage: () => {},
   sendContentUpdate: () => {},
   sendCursorPosition: () => {},
   sendSelection: () => {},
@@ -32,6 +36,7 @@ export function SocketProvider({ children }: { children: ReactNode }) {
   const [socket, setSocket] = useState<Socket | null>(null)
   const [isConnected, setIsConnected] = useState(false)
   const [currentUsers, setCurrentUsers] = useState<Map<string, UserPresence>>(new Map())
+  const [currentPageId, setCurrentPageId] = useState<string | null>(null)
   const socketRef = useRef<Socket | null>(null)
 
   useEffect(() => {
@@ -46,12 +51,10 @@ export function SocketProvider({ children }: { children: ReactNode }) {
     socketRef.current = socketInstance
 
     const handleConnect = () => {
-      console.log('Connected to Socket.io server')
       setIsConnected(true)
     }
 
     const handleDisconnect = () => {
-      console.log('Disconnected from Socket.io server')
       setIsConnected(false)
       setCurrentUsers(new Map())
     }
@@ -63,8 +66,8 @@ export function SocketProvider({ children }: { children: ReactNode }) {
         setCurrentUsers(() => {
           const userMap = new Map<string, UserPresence>()
           users.forEach(user => {
-            if (user?.socketId) {
-              userMap.set(user.socketId, user)
+            if (user && user.userId) {
+              userMap.set(user.userId, user)
             }
           })
           return userMap
@@ -72,25 +75,25 @@ export function SocketProvider({ children }: { children: ReactNode }) {
       })
     }
 
-    const handleUserJoined = (data: { socketId: string; user: UserPresence }) => {
-      if (!data?.socketId || !data?.user) return
+    const handleUserJoined = (data: { user: UserPresence }) => {
+      if (!data?.user || !data.user.userId) return
       
       requestAnimationFrame(() => {
         setCurrentUsers(prev => {
           const newMap = new Map(prev)
-          newMap.set(data.socketId, data.user)
+          newMap.set(data.user.userId, data.user)
           return newMap
         })
       })
     }
 
-    const handleUserLeft = (data: { socketId: string }) => {
-      if (!data?.socketId) return
+    const handleUserLeft = (data: { userId: string }) => {
+      if (!data?.userId) return
       
       requestAnimationFrame(() => {
         setCurrentUsers(prev => {
           const newMap = new Map(prev)
-          newMap.delete(data.socketId)
+          newMap.delete(data.userId)
           return newMap
         })
       })
@@ -117,10 +120,19 @@ export function SocketProvider({ children }: { children: ReactNode }) {
 
   const joinPage = useCallback((pageId: string, workspaceId: string, user: any) => {
     if (socket && socket.connected) {
+      // Clear users when joining a new page
+      setCurrentUsers(new Map())
+      setCurrentPageId(pageId)
       socket.emit('join-page', { pageId, workspaceId, user })
     }
   }, [socket])
 
+  const leavePage = useCallback(() => {
+    setCurrentUsers(new Map())
+    setCurrentPageId(null)
+    // Socket will automatically leave rooms on disconnect
+  }, [])
+
   const lastContentUpdate = useRef<string>('')
   
   const sendContentUpdate = useCallback((pageId: string, blocks: any[], userId: string) => {
@@ -163,7 +175,9 @@ export function SocketProvider({ children }: { children: ReactNode }) {
       socket,
       isConnected,
       currentUsers,
+      currentPageId,
       joinPage,
+      leavePage,
       sendContentUpdate,
       sendCursorPosition,
       sendSelection,
diff --git a/server.js b/server.js
index 7c441d0..fa2ec31 100644
--- a/server.js
+++ b/server.js
@@ -31,207 +31,120 @@ app.prepare().then(() => {
     }
   })
 
-  const pageRooms = new Map()
-  const userColors = [
-    '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', 
-    '#98D8C8', '#A8E6CF', '#FFD3B6', '#FFAAA5'
-  ]
-  let colorIndex = 0
-
-  const getUserColor = () => {
-    const color = userColors[colorIndex % userColors.length]
-    colorIndex++
-    return color
-  }
-
+  // Simple page-based user tracking
+  const pageRooms = new Map() // roomId -> Map(userId -> userInfo)
+  const userColors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#A8E6CF', '#FFD3B6', '#FFAAA5']
+  
   io.on('connection', (socket) => {
-    console.log('User connected:', socket.id)
+    console.log('✅ Socket connected:', socket.id)
+    let currentRoom = null
+    let currentUserId = null
 
-    // Join a page room
-    socket.on('join-page', async (data) => {
-      console.log('User joining page:', data)
+    socket.on('join-page', (data) => {
+      console.log('📄 Join page request:', data)
       const { pageId, workspaceId, user } = data
-      const roomId = `page:${pageId}`
+      
+      if (!pageId || !user?.id) {
+        console.log('❌ Invalid join request - missing pageId or user.id')
+        return
+      }
 
-      // Leave previous rooms
-      const rooms = Array.from(socket.rooms)
-      rooms.forEach(room => {
-        if (room !== socket.id && room.startsWith('page:')) {
-          socket.leave(room)
-          removeUserFromRoom(room, socket.id)
-          
-          // Notify users in the old room
-          io.to(room).emit('user-left', {
-            socketId: socket.id
+      const roomId = `page:${pageId}`
+      
+      // Leave previous room if any
+      if (currentRoom && currentRoom !== roomId) {
+        socket.leave(currentRoom)
+        const oldRoom = pageRooms.get(currentRoom)
+        if (oldRoom) {
+          oldRoom.delete(currentUserId)
+          // Notify others in old room that someone left
+          socket.to(currentRoom).emit('user-left', {
+            userId: currentUserId
           })
+          console.log(`👋 User ${currentUserId} left room ${currentRoom}`)
         }
-      })
+      }
 
       // Join new room
       socket.join(roomId)
+      currentRoom = roomId
+      currentUserId = user.id
 
       // Initialize room if needed
       if (!pageRooms.has(roomId)) {
-        pageRooms.set(roomId, {
-          pageId,
-          workspaceId,
-          users: new Map()
-        })
+        pageRooms.set(roomId, new Map())
       }
 
       // Add user to room
       const room = pageRooms.get(roomId)
-      const userPresence = {
+      const userInfo = {
         userId: user.id,
-        name: user.name,
-        email: user.email,
-        avatarUrl: user.avatarUrl,
-        socketId: socket.id,
-        color: getUserColor()
+        name: user.name || 'Anonymous',
+        email: user.email || '',
+        color: userColors[Math.floor(Math.random() * userColors.length)],
+        socketId: socket.id
       }
-      room.users.set(socket.id, userPresence)
-
-      // Send current users to the new user (excluding themselves)
-      const currentUsers = Array.from(room.users.entries())
-        .filter(([id]) => id !== socket.id)
-        .map(([id, userData]) => ({
-          socketId: id,
-          ...userData
-        }))
-      socket.emit('current-users', currentUsers)
+      room.set(user.id, userInfo)
 
-      // Notify others in the room
+      // Get all users in this room
+      const allUsers = Array.from(room.values())
+      
+      // Send list of other users to the joining user (excluding themselves)
+      const otherUsers = allUsers.filter(u => u.userId !== user.id)
+      socket.emit('current-users', otherUsers)
+      
+      // Notify others that a new user joined
       socket.to(roomId).emit('user-joined', {
-        socketId: socket.id,
-        user: userPresence
+        user: userInfo
       })
       
-      console.log(`User ${user.name} joined room ${roomId}. Total users: ${room.users.size}`)
+      console.log(`✅ User ${user.name} (${user.id}) joined room ${roomId}. Total users: ${room.size}`)
     })
 
     // Handle content updates
     socket.on('content-update', (data) => {
-      const roomId = `page:${data.pageId}`
-      const room = pageRooms.get(roomId)
-      
-      if (room) {
-        const otherUsers = room.users.size - 1
-        if (otherUsers > 0) {
-          console.log(`[${new Date().toISOString()}] Content update in room ${roomId} from user ${data.userId}. Broadcasting to ${otherUsers} other users`)
-          
-          // Broadcast to all other users in the room
-          socket.to(roomId).emit('content-updated', {
-            blocks: data.blocks,
-            userId: data.userId,
-            timestamp: new Date().toISOString()
-          })
-        }
-      } else {
-        console.log(`Warning: Content update for non-existent room ${roomId}`)
-      }
-    })
-
-    // Handle cursor movement
-    socket.on('cursor-move', (data) => {
-      const roomId = `page:${data.pageId}`
-      const room = pageRooms.get(roomId)
+      if (!currentRoom) return
       
-      if (room && room.users.has(socket.id)) {
-        const user = room.users.get(socket.id)
-        user.cursorPosition = data.position
-
-        // Broadcast cursor position to others
-        socket.to(roomId).emit('cursor-moved', {
-          socketId: socket.id,
-          position: data.position,
-          user: user
+      const room = pageRooms.get(currentRoom)
+      if (room && room.size > 1) {
+        console.log(`📝 Broadcasting content update in ${currentRoom} to ${room.size - 1} other users`)
+        socket.to(currentRoom).emit('content-updated', {
+          blocks: data.blocks,
+          userId: data.userId,
+          timestamp: new Date().toISOString()
         })
       }
     })
 
-    // Handle selection changes
-    socket.on('selection-change', (data) => {
-      const roomId = `page:${data.pageId}`
-      const room = pageRooms.get(roomId)
-      
-      if (room && room.users.has(socket.id)) {
-        const user = room.users.get(socket.id)
-        user.selection = data.selection
-
-        // Broadcast selection to others
-        socket.to(roomId).emit('selection-changed', {
-          socketId: socket.id,
-          selection: data.selection,
-          user: user
-        })
-      }
-    })
-
-    // Handle typing indicator
-    socket.on('typing-start', (data) => {
-      const roomId = `page:${data.pageId}`
-      const room = pageRooms.get(roomId)
-      
-      if (room && room.users.has(socket.id)) {
-        const user = room.users.get(socket.id)
-        
-        socket.to(roomId).emit('user-typing', {
-          socketId: socket.id,
-          blockId: data.blockId,
-          user: user
-        })
-      }
-    })
-
-    socket.on('typing-stop', (data) => {
-      const roomId = `page:${data.pageId}`
-      
-      socket.to(roomId).emit('user-stopped-typing', {
-        socketId: socket.id,
-        blockId: data.blockId
-      })
-    })
-
     // Handle disconnect
     socket.on('disconnect', () => {
-      console.log('User disconnected:', socket.id)
-
-      // Remove from all page rooms
-      pageRooms.forEach((room, roomId) => {
-        if (room.users.has(socket.id)) {
-          const user = room.users.get(socket.id)
-          room.users.delete(socket.id)
+      console.log('❌ Socket disconnected:', socket.id)
+      
+      if (currentRoom && currentUserId) {
+        const room = pageRooms.get(currentRoom)
+        if (room) {
+          room.delete(currentUserId)
           
-          // Notify others in the room
-          io.to(roomId).emit('user-left', {
-            socketId: socket.id
+          // Notify others in the room that someone left
+          socket.to(currentRoom).emit('user-left', {
+            userId: currentUserId
           })
           
-          console.log(`User ${user?.name} left room ${roomId}. Remaining users: ${room.users.size}`)
+          console.log(`👋 User ${currentUserId} disconnected from ${currentRoom}. Remaining: ${room.size}`)
           
           // Clean up empty rooms
-          if (room.users.size === 0) {
-            pageRooms.delete(roomId)
+          if (room.size === 0) {
+            pageRooms.delete(currentRoom)
+            console.log(`🧹 Cleaned up empty room ${currentRoom}`)
           }
         }
-      })
+      }
     })
   })
 
-  const removeUserFromRoom = (roomId, socketId) => {
-    const room = pageRooms.get(roomId)
-    if (room) {
-      room.users.delete(socketId)
-      
-      // Clean up empty rooms
-      if (room.users.size === 0) {
-        pageRooms.delete(roomId)
-      }
-    }
-  }
-
   server.listen(port, (err) => {
     if (err) throw err
     console.log(`> Ready on http://${hostname}:${port}`)
+    console.log('> Socket.io server running')
   })
 })
\ No newline at end of file

From 912e0e6a294a07de91947c3de215adc0864ef012 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 18:42:38 +0530
Subject: [PATCH 25/43] fix online presence indicator

---
 .../[workspaceId]/page/[pageId]/PageEditorV2.tsx       | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
index aac59e8..3fd6e6e 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
@@ -8,7 +8,6 @@ import { NotionPageHeader } from '@/components/page/notion-page-header'
 import { cn } from '@/lib/utils'
 import toast from 'react-hot-toast'
 import { useSocket } from '@/lib/socket/client'
-import { ActiveUsers } from '@/components/collaboration/ActiveUsers'
 
 // Dynamically import NotionEditor to avoid SSR hydration issues with DnD
 const NotionEditor = dynamic(
@@ -66,7 +65,7 @@ interface PageEditorProps {
 
 export default function PageEditorV2({ page, initialContent, user }: PageEditorProps) {
   const router = useRouter()
-  const { socket, isConnected, currentUsers, joinPage, leavePage, sendContentUpdate } = useSocket()
+  const { socket, isConnected, joinPage, leavePage, sendContentUpdate } = useSocket()
   const [title, setTitle] = useState(page.title || '')
   const [icon, setIcon] = useState(page.icon || '')
   const [coverImage, setCoverImage] = useState(page.coverImage || '')
@@ -336,13 +335,6 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
 
   return (
     <div className="min-h-screen bg-white dark:bg-[#191919]">
-      {/* Active users indicator */}
-      {isConnected && (
-        <div className="fixed top-4 right-4 z-50">
-          <ActiveUsers />
-        </div>
-      )}
-      
       {/* Notion-style Page Header */}
       <NotionPageHeader 
         page={{...page, icon, coverImage, updatedAt: lastUpdated}} 

From 2c3010129eacec77ce099f5a82f1e78fe48396bc Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 18:47:33 +0530
Subject: [PATCH 26/43] workspace creation

---
 app/api/workspaces/route.ts                   | 23 ++++++++-------
 .../workspace/create-workspace-modal.tsx      | 29 ++++++++++++++++---
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/app/api/workspaces/route.ts b/app/api/workspaces/route.ts
index b47ad84..a737b88 100644
--- a/app/api/workspaces/route.ts
+++ b/app/api/workspaces/route.ts
@@ -15,25 +15,28 @@ export async function POST(request: NextRequest) {
     
     // Validate input
     const validatedData = createWorkspaceSchema.parse(body)
-    const { name, slug } = validatedData
+    let { name, slug } = validatedData
 
-    // Check if slug is already taken
-    const existingWorkspace = await prisma.workspace.findUnique({
-      where: { slug }
+    // Check if slug is already taken and generate a unique one if needed
+    let finalSlug = slug
+    let counter = 1
+    let existingWorkspace = await prisma.workspace.findUnique({
+      where: { slug: finalSlug }
     })
 
-    if (existingWorkspace) {
-      return NextResponse.json(
-        { error: "A workspace with this name already exists" },
-        { status: 400 }
-      )
+    while (existingWorkspace) {
+      finalSlug = `${slug}-${counter}`
+      counter++
+      existingWorkspace = await prisma.workspace.findUnique({
+        where: { slug: finalSlug }
+      })
     }
 
     // Create workspace and add user as owner
     const workspace = await prisma.workspace.create({
       data: {
         name,
-        slug,
+        slug: finalSlug,
         members: {
           create: {
             userId: user.id,
diff --git a/components/workspace/create-workspace-modal.tsx b/components/workspace/create-workspace-modal.tsx
index 29c6a1f..ce77193 100644
--- a/components/workspace/create-workspace-modal.tsx
+++ b/components/workspace/create-workspace-modal.tsx
@@ -34,6 +34,17 @@ export function CreateWorkspaceModal({ onClose, onSuccess }: CreateWorkspaceModa
     onClose?.()
   }
 
+  // Generate slug from name
+  const generateSlug = (name: string): string => {
+    return name
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9\s-]/g, '') // Remove special characters
+      .replace(/\s+/g, '-') // Replace spaces with hyphens
+      .replace(/-+/g, '-') // Replace multiple hyphens with single hyphen
+      .replace(/^-+|-+$/g, '') // Remove leading/trailing hyphens
+  }
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     
@@ -45,13 +56,23 @@ export function CreateWorkspaceModal({ onClose, onSuccess }: CreateWorkspaceModa
     setIsLoading(true)
 
     try {
+      const trimmedName = name.trim()
+      const slug = generateSlug(trimmedName)
+      
+      if (!slug) {
+        toast.error("Please enter a valid workspace name")
+        setIsLoading(false)
+        return
+      }
+
       const response = await fetch("/api/workspaces", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          name: name.trim(),
+          name: trimmedName,
+          slug: slug,
           description: description.trim() || undefined,
           icon: icon || undefined,
         }),
@@ -85,7 +106,7 @@ export function CreateWorkspaceModal({ onClose, onSuccess }: CreateWorkspaceModa
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-[425px] max-h-[90vh] overflow-y-auto">
         <form onSubmit={handleSubmit}>
           <DialogHeader>
             <DialogTitle>Create workspace</DialogTitle>
@@ -99,7 +120,7 @@ export function CreateWorkspaceModal({ onClose, onSuccess }: CreateWorkspaceModa
               <Label htmlFor="icon" className="text-sm font-normal">
                 Icon
               </Label>
-              <div className="flex gap-2">
+              <div className="flex gap-2 flex-wrap">
                 {emojiOptions.map((emoji) => (
                   <button
                     key={emoji}
@@ -141,7 +162,7 @@ export function CreateWorkspaceModal({ onClose, onSuccess }: CreateWorkspaceModa
                 value={description}
                 onChange={(e) => setDescription(e.target.value)}
                 placeholder="What's this workspace for?"
-                className="min-h-[80px] border-neutral-200 dark:border-neutral-800 focus:ring-0 focus:border-neutral-400 resize-none"
+                className="min-h-[60px] max-h-[120px] border-neutral-200 dark:border-neutral-800 focus:ring-0 focus:border-neutral-400 resize-none"
                 disabled={isLoading}
               />
             </div>

From 7156895cc8f36fc8e63ef427518e5737c6bbda13 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 18:54:02 +0530
Subject: [PATCH 27/43] avatar fix

---
 app/api/upload/avatar/route.ts        |  73 +++++++++++
 app/api/user/profile/route.ts         |  13 +-
 components/layout/notion-sidebar.tsx  |  15 ++-
 components/settings/SettingsModal.tsx |  43 ++++--
 components/ui/avatar-upload.tsx       | 182 ++++++++++++++++++++++++++
 5 files changed, 307 insertions(+), 19 deletions(-)
 create mode 100644 app/api/upload/avatar/route.ts
 create mode 100644 components/ui/avatar-upload.tsx

diff --git a/app/api/upload/avatar/route.ts b/app/api/upload/avatar/route.ts
new file mode 100644
index 0000000..e93a9cb
--- /dev/null
+++ b/app/api/upload/avatar/route.ts
@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from "next/server"
+import { requireAuth } from "@/lib/auth"
+import { prisma } from "@/lib/db/prisma"
+
+export async function POST(request: NextRequest) {
+  try {
+    const user = await requireAuth()
+    
+    const formData = await request.formData()
+    const file = formData.get("file") as File
+    
+    if (!file) {
+      return NextResponse.json(
+        { error: "No file provided" },
+        { status: 400 }
+      )
+    }
+    
+    // Validate file type
+    if (!file.type.startsWith("image/")) {
+      return NextResponse.json(
+        { error: "File must be an image" },
+        { status: 400 }
+      )
+    }
+    
+    // Validate file size (max 5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      return NextResponse.json(
+        { error: "File size must be less than 5MB" },
+        { status: 400 }
+      )
+    }
+    
+    // Convert file to base64 for storage
+    // In production, you would upload to S3/MinIO instead
+    const bytes = await file.arrayBuffer()
+    const buffer = Buffer.from(bytes)
+    const base64 = `data:${file.type};base64,${buffer.toString("base64")}`
+    
+    // Update user avatar
+    const updatedUser = await prisma.user.update({
+      where: { id: user.id },
+      data: { avatarUrl: base64 },
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        avatarUrl: true
+      }
+    })
+    
+    return NextResponse.json({
+      success: true,
+      avatarUrl: updatedUser.avatarUrl
+    })
+    
+  } catch (error) {
+    console.error("Avatar upload error:", error)
+    
+    if (error instanceof Error && error.message === "Authentication required") {
+      return NextResponse.json(
+        { error: "Authentication required" },
+        { status: 401 }
+      )
+    }
+    
+    return NextResponse.json(
+      { error: "Failed to upload avatar" },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/api/user/profile/route.ts b/app/api/user/profile/route.ts
index 9479ebd..c647c9f 100644
--- a/app/api/user/profile/route.ts
+++ b/app/api/user/profile/route.ts
@@ -13,15 +13,18 @@ export async function PATCH(request: NextRequest) {
     }
 
     const body = await request.json()
-    const { name, email } = body
+    const { name, email, avatarUrl } = body
+
+    // Build update data object
+    const updateData: any = {}
+    if (name !== undefined) updateData.name = name
+    if (email !== undefined) updateData.email = email
+    if (avatarUrl !== undefined) updateData.avatarUrl = avatarUrl
 
     // Update user profile
     const updatedUser = await prisma.user.update({
       where: { id: user.id },
-      data: {
-        name: name || null,
-        email: email || user.email,
-      },
+      data: updateData,
       select: {
         id: true,
         name: true,
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index aaf20bc..57135fe 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -38,6 +38,7 @@ import { signOut } from "next-auth/react"
 import { CreateWorkspaceModal } from "@/components/workspace/create-workspace-modal"
 import { SearchDialog } from "@/components/search/SearchDialog"
 import { SettingsModal } from "@/components/settings/SettingsModal"
+import { AvatarUpload } from "@/components/ui/avatar-upload"
 import { cn } from "@/lib/utils"
 import toast from "react-hot-toast"
 
@@ -241,8 +242,18 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56" align="start">
-              <div className="px-2 py-1.5">
-                <p className="text-xs text-muted-foreground">{user.email}</p>
+              <div className="px-2 py-1.5 flex items-center gap-2">
+                <AvatarUpload
+                  currentAvatarUrl={user.avatarUrl}
+                  userName={user.name}
+                  userEmail={user.email}
+                  size="sm"
+                  editable={false}
+                />
+                <div className="flex-1">
+                  <p className="text-sm font-medium">{user.name || 'User'}</p>
+                  <p className="text-xs text-muted-foreground">{user.email}</p>
+                </div>
               </div>
               <DropdownMenuSeparator />
               {workspaces.map((workspace) => (
diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
index bbf2db5..cc5bffb 100644
--- a/components/settings/SettingsModal.tsx
+++ b/components/settings/SettingsModal.tsx
@@ -9,6 +9,7 @@ import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
 import { Switch } from '@/components/ui/switch'
 import { Separator } from '@/components/ui/separator'
+import { AvatarUpload } from '@/components/ui/avatar-upload'
 import { 
   User, 
   Bell, 
@@ -56,6 +57,7 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
   // Account settings state
   const [name, setName] = useState(user?.name || '')
   const [email, setEmail] = useState(user?.email || '')
+  const [avatarUrl, setAvatarUrl] = useState(user?.avatarUrl || '')
   
   // Notification settings state
   const [emailNotifications, setEmailNotifications] = useState({
@@ -180,9 +182,18 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
 
   const renderSidebar = () => (
     <div className="w-60 bg-gray-50 dark:bg-[#1a1a1a] h-full border-r dark:border-gray-800">
-      <div className="p-4">
-        <h2 className="text-sm font-semibold mb-1">{user?.name || 'User'}</h2>
-        <p className="text-xs text-gray-500 dark:text-gray-400">{user?.email}</p>
+      <div className="p-4 flex items-center gap-3">
+        <AvatarUpload
+          currentAvatarUrl={avatarUrl}
+          userName={user?.name}
+          userEmail={user?.email}
+          size="sm"
+          editable={false}
+        />
+        <div>
+          <h2 className="text-sm font-semibold">{user?.name || 'User'}</h2>
+          <p className="text-xs text-gray-500 dark:text-gray-400">{user?.email}</p>
+        </div>
       </div>
       
       <div className="px-2">
@@ -306,12 +317,16 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
       
       <div className="space-y-6">
         <div className="flex items-center gap-4">
-          <div className="h-16 w-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-2xl font-bold">
-            {name?.[0]?.toUpperCase() || email?.[0]?.toUpperCase() || 'U'}
-          </div>
-          <Button variant="outline" size="sm">
-            Upload photo
-          </Button>
+          <AvatarUpload
+            currentAvatarUrl={avatarUrl}
+            userName={name}
+            userEmail={email}
+            onUpload={(url) => {
+              setAvatarUrl(url)
+              router.refresh()
+            }}
+            size="lg"
+          />
         </div>
         
         <div className="space-y-4">
@@ -813,9 +828,13 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
               className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900"
             >
               <div className="flex items-center gap-3">
-                <div className="h-8 w-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-sm font-bold">
-                  {member.name?.[0]?.toUpperCase() || member.email?.[0]?.toUpperCase()}
-                </div>
+                <AvatarUpload
+                  currentAvatarUrl={member.avatarUrl}
+                  userName={member.name}
+                  userEmail={member.email}
+                  size="sm"
+                  editable={false}
+                />
                 <div>
                   <p className="text-sm font-medium">
                     {member.name || 'Unknown'} 
diff --git a/components/ui/avatar-upload.tsx b/components/ui/avatar-upload.tsx
new file mode 100644
index 0000000..6494aee
--- /dev/null
+++ b/components/ui/avatar-upload.tsx
@@ -0,0 +1,182 @@
+"use client"
+
+import { useState, useRef } from "react"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Camera, Upload, X } from "lucide-react"
+import toast from "react-hot-toast"
+import { cn } from "@/lib/utils"
+
+interface AvatarUploadProps {
+  currentAvatarUrl?: string | null
+  userName?: string | null
+  userEmail?: string
+  onUpload?: (avatarUrl: string) => void
+  size?: "sm" | "md" | "lg"
+  editable?: boolean
+}
+
+export function AvatarUpload({
+  currentAvatarUrl,
+  userName,
+  userEmail,
+  onUpload,
+  size = "md",
+  editable = true
+}: AvatarUploadProps) {
+  const [isUploading, setIsUploading] = useState(false)
+  const [avatarUrl, setAvatarUrl] = useState(currentAvatarUrl)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  
+  const sizeClasses = {
+    sm: "h-10 w-10",
+    md: "h-20 w-20",
+    lg: "h-32 w-32"
+  }
+  
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    
+    // Validate file type
+    if (!file.type.startsWith("image/")) {
+      toast.error("Please select an image file")
+      return
+    }
+    
+    // Validate file size (max 5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      toast.error("File size must be less than 5MB")
+      return
+    }
+    
+    setIsUploading(true)
+    
+    try {
+      const formData = new FormData()
+      formData.append("file", file)
+      
+      const response = await fetch("/api/upload/avatar", {
+        method: "POST",
+        body: formData
+      })
+      
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.error || "Failed to upload avatar")
+      }
+      
+      const data = await response.json()
+      setAvatarUrl(data.avatarUrl)
+      onUpload?.(data.avatarUrl)
+      toast.success("Avatar updated successfully")
+    } catch (error) {
+      console.error("Avatar upload error:", error)
+      toast.error(error instanceof Error ? error.message : "Failed to upload avatar")
+    } finally {
+      setIsUploading(false)
+      // Reset file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ""
+      }
+    }
+  }
+  
+  const handleRemoveAvatar = async () => {
+    setIsUploading(true)
+    
+    try {
+      const response = await fetch("/api/user/profile", {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          avatarUrl: null
+        })
+      })
+      
+      if (!response.ok) {
+        throw new Error("Failed to remove avatar")
+      }
+      
+      setAvatarUrl(null)
+      onUpload?.("")
+      toast.success("Avatar removed")
+    } catch (error) {
+      console.error("Remove avatar error:", error)
+      toast.error("Failed to remove avatar")
+    } finally {
+      setIsUploading(false)
+    }
+  }
+  
+  const getInitials = () => {
+    if (userName) {
+      return userName
+        .split(" ")
+        .map(n => n[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2)
+    }
+    return userEmail?.[0]?.toUpperCase() || "?"
+  }
+  
+  return (
+    <div className="relative inline-block">
+      <Avatar className={cn(sizeClasses[size], "relative")}>
+        <AvatarImage src={avatarUrl || undefined} alt={userName || userEmail} />
+        <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white">
+          {getInitials()}
+        </AvatarFallback>
+      </Avatar>
+      
+      {editable && (
+        <>
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isUploading}
+            className={cn(
+              "absolute bottom-0 right-0 rounded-full bg-white dark:bg-gray-800 p-1.5 shadow-lg",
+              "border border-gray-200 dark:border-gray-700",
+              "hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              size === "sm" && "p-1"
+            )}
+            title="Change avatar"
+          >
+            {isUploading ? (
+              <div className="animate-spin h-3 w-3 border-2 border-gray-500 border-t-transparent rounded-full" />
+            ) : (
+              <Camera className={cn("text-gray-600 dark:text-gray-400", size === "sm" ? "h-3 w-3" : "h-4 w-4")} />
+            )}
+          </button>
+          
+          {avatarUrl && (
+            <button
+              onClick={handleRemoveAvatar}
+              disabled={isUploading}
+              className={cn(
+                "absolute -top-1 -right-1 rounded-full bg-red-500 p-1 shadow-lg",
+                "hover:bg-red-600 transition-colors",
+                "disabled:opacity-50 disabled:cursor-not-allowed"
+              )}
+              title="Remove avatar"
+            >
+              <X className="h-3 w-3 text-white" />
+            </button>
+          )}
+          
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            onChange={handleFileSelect}
+            className="hidden"
+          />
+        </>
+      )}
+    </div>
+  )
+}
\ No newline at end of file

From 8ad7b5741d7376891f3b3b2289b583c44d9d32e4 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 19:00:55 +0530
Subject: [PATCH 28/43] update settings modal

---
 components/settings/SettingsModal.tsx | 294 ++++++++++++++------------
 1 file changed, 155 insertions(+), 139 deletions(-)

diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
index cc5bffb..ec8bf73 100644
--- a/components/settings/SettingsModal.tsx
+++ b/components/settings/SettingsModal.tsx
@@ -181,139 +181,147 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
   }
 
   const renderSidebar = () => (
-    <div className="w-60 bg-gray-50 dark:bg-[#1a1a1a] h-full border-r dark:border-gray-800">
-      <div className="p-4 flex items-center gap-3">
-        <AvatarUpload
-          currentAvatarUrl={avatarUrl}
-          userName={user?.name}
-          userEmail={user?.email}
-          size="sm"
-          editable={false}
-        />
-        <div>
-          <h2 className="text-sm font-semibold">{user?.name || 'User'}</h2>
-          <p className="text-xs text-gray-500 dark:text-gray-400">{user?.email}</p>
+    <div className="w-60 min-w-[240px] bg-gray-50 dark:bg-gray-900/50 h-full border-r border-gray-200 dark:border-gray-800 flex flex-col">
+      {/* User Profile Section */}
+      <div className="p-4 border-b border-gray-200 dark:border-gray-800">
+        <div className="flex items-center gap-3">
+          <AvatarUpload
+            currentAvatarUrl={avatarUrl}
+            userName={user?.name}
+            userEmail={user?.email}
+            size="sm"
+            editable={false}
+          />
+          <div className="flex-1 min-w-0">
+            <h2 className="text-sm font-semibold truncate">{user?.name || 'User'}</h2>
+            <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{user?.email}</p>
+          </div>
         </div>
       </div>
       
-      <div className="px-2">
-        <div className="mb-2">
-          <p className="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400">Account</p>
-        </div>
-        
-        <button
-          onClick={() => setCurrentSection('account')}
-          className={cn(
-            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
-            currentSection === 'account' 
-              ? "bg-gray-200 dark:bg-gray-800" 
-              : "hover:bg-gray-100 dark:hover:bg-gray-800"
-          )}
-        >
-          <User className="h-4 w-4" />
-          My account
-        </button>
-        
-        <button
-          onClick={() => setCurrentSection('notifications')}
-          className={cn(
-            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
-            currentSection === 'notifications' 
-              ? "bg-gray-200 dark:bg-gray-800" 
-              : "hover:bg-gray-100 dark:hover:bg-gray-800"
-          )}
-        >
-          <Bell className="h-4 w-4" />
-          My notifications
-        </button>
-        
-        <button
-          onClick={() => setCurrentSection('security')}
-          className={cn(
-            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
-            currentSection === 'security' 
-              ? "bg-gray-200 dark:bg-gray-800" 
-              : "hover:bg-gray-100 dark:hover:bg-gray-800"
-          )}
-        >
-          <Shield className="h-4 w-4" />
-          Security
-        </button>
+      {/* Navigation */}
+      <div className="flex-1 overflow-y-auto py-2">
+        <div className="px-2 space-y-1">
+          <div className="mb-2">
+            <p className="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Account</p>
+          </div>
         
-        <button
-          onClick={() => setCurrentSection('appearance')}
-          className={cn(
-            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
-            currentSection === 'appearance' 
-              ? "bg-gray-200 dark:bg-gray-800" 
-              : "hover:bg-gray-100 dark:hover:bg-gray-800"
-          )}
-        >
-          <Palette className="h-4 w-4" />
-          Appearance
-        </button>
+          <button
+            onClick={() => setCurrentSection('account')}
+            className={cn(
+              "w-full px-3 py-2 text-sm text-left rounded-md flex items-center gap-3 transition-all",
+              currentSection === 'account' 
+                ? "bg-white dark:bg-gray-800 shadow-sm text-gray-900 dark:text-white font-medium" 
+                : "hover:bg-gray-100 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-300"
+            )}
+          >
+            <User className="h-4 w-4 flex-shrink-0" />
+            <span>My account</span>
+          </button>
         
-        <div className="my-2" />
+          <button
+            onClick={() => setCurrentSection('notifications')}
+            className={cn(
+              "w-full px-3 py-2 text-sm text-left rounded-md flex items-center gap-3 transition-all",
+              currentSection === 'notifications' 
+                ? "bg-white dark:bg-gray-800 shadow-sm text-gray-900 dark:text-white font-medium" 
+                : "hover:bg-gray-100 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-300"
+            )}
+          >
+            <Bell className="h-4 w-4 flex-shrink-0" />
+            <span>My notifications</span>
+          </button>
         
-        <div className="mb-2">
-          <p className="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400">Workspace</p>
+          <button
+            onClick={() => setCurrentSection('security')}
+            className={cn(
+              "w-full px-3 py-2 text-sm text-left rounded-md flex items-center gap-3 transition-all",
+              currentSection === 'security' 
+                ? "bg-white dark:bg-gray-800 shadow-sm text-gray-900 dark:text-white font-medium" 
+                : "hover:bg-gray-100 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-300"
+            )}
+          >
+            <Shield className="h-4 w-4 flex-shrink-0" />
+            <span>Security</span>
+          </button>
+          
+          <button
+            onClick={() => setCurrentSection('appearance')}
+            className={cn(
+              "w-full px-3 py-2 text-sm text-left rounded-md flex items-center gap-3 transition-all",
+              currentSection === 'appearance' 
+                ? "bg-white dark:bg-gray-800 shadow-sm text-gray-900 dark:text-white font-medium" 
+                : "hover:bg-gray-100 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-300"
+            )}
+          >
+            <Palette className="h-4 w-4 flex-shrink-0" />
+            <span>Appearance</span>
+          </button>
+          
+          <div className="my-3 mx-2 border-t border-gray-200 dark:border-gray-800" />
+          
+          <div className="mb-2">
+            <p className="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Workspace</p>
+          </div>
+          
+          <button
+            onClick={() => setCurrentSection('workspace')}
+            className={cn(
+              "w-full px-3 py-2 text-sm text-left rounded-md flex items-center gap-3 transition-all",
+              currentSection === 'workspace' 
+                ? "bg-white dark:bg-gray-800 shadow-sm text-gray-900 dark:text-white font-medium" 
+                : "hover:bg-gray-100 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-300"
+            )}
+          >
+            <Settings className="h-4 w-4 flex-shrink-0" />
+            <span>Settings</span>
+          </button>
+          
+          <button
+            onClick={() => setCurrentSection('billing')}
+            className={cn(
+              "w-full px-3 py-2 text-sm text-left rounded-md flex items-center gap-3 transition-all",
+              currentSection === 'billing' 
+                ? "bg-white dark:bg-gray-800 shadow-sm text-gray-900 dark:text-white font-medium" 
+                : "hover:bg-gray-100 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-300"
+            )}
+          >
+            <CreditCard className="h-4 w-4 flex-shrink-0" />
+            <span>Billing</span>
+          </button>
+          
+          <button
+            onClick={() => setCurrentSection('members')}
+            className={cn(
+              "w-full px-3 py-2 text-sm text-left rounded-md flex items-center gap-3 transition-all",
+              currentSection === 'members' 
+                ? "bg-white dark:bg-gray-800 shadow-sm text-gray-900 dark:text-white font-medium" 
+                : "hover:bg-gray-100 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-300"
+            )}
+          >
+            <Users className="h-4 w-4 flex-shrink-0" />
+            <span>Members</span>
+          </button>
         </div>
-        
-        <button
-          onClick={() => setCurrentSection('workspace')}
-          className={cn(
-            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
-            currentSection === 'workspace' 
-              ? "bg-gray-200 dark:bg-gray-800" 
-              : "hover:bg-gray-100 dark:hover:bg-gray-800"
-          )}
-        >
-          <Settings className="h-4 w-4" />
-          Settings
-        </button>
-        
-        <button
-          onClick={() => setCurrentSection('billing')}
-          className={cn(
-            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
-            currentSection === 'billing' 
-              ? "bg-gray-200 dark:bg-gray-800" 
-              : "hover:bg-gray-100 dark:hover:bg-gray-800"
-          )}
-        >
-          <CreditCard className="h-4 w-4" />
-          Billing
-        </button>
-        
-        <button
-          onClick={() => setCurrentSection('members')}
-          className={cn(
-            "w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 transition-colors",
-            currentSection === 'members' 
-              ? "bg-gray-200 dark:bg-gray-800" 
-              : "hover:bg-gray-100 dark:hover:bg-gray-800"
-          )}
-        >
-          <Users className="h-4 w-4" />
-          Members
-        </button>
-        
-        <div className="my-3 mx-2 border-t dark:border-gray-800" />
-        
+      </div>
+      
+      {/* Logout Button */}
+      <div className="p-2 border-t border-gray-200 dark:border-gray-800">
         <button
           onClick={() => signOut({ callbackUrl: '/' })}
-          className="w-full px-2 py-1.5 text-sm text-left rounded-md flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-gray-800 text-red-600 dark:text-red-400"
+          className="w-full px-3 py-2 text-sm text-left rounded-md flex items-center gap-3 hover:bg-red-50 dark:hover:bg-red-900/20 text-red-600 dark:text-red-400 transition-all"
         >
-          <LogOut className="h-4 w-4" />
-          Log out
+          <LogOut className="h-4 w-4 flex-shrink-0" />
+          <span>Log out</span>
         </button>
       </div>
     </div>
   )
 
   const renderAccountSettings = () => (
-    <div className="p-8">
-      <h2 className="text-2xl font-semibold mb-6">My account</h2>
+    <div className="p-8 max-w-3xl">
+      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">My account</h2>
+      <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">Manage your personal information and preferences</p>
       
       <div className="space-y-6">
         <div className="flex items-center gap-4">
@@ -331,23 +339,25 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
         
         <div className="space-y-4">
           <div className="grid gap-2">
-            <Label htmlFor="name">Name</Label>
+            <Label htmlFor="name" className="text-sm font-medium text-gray-700 dark:text-gray-300">Name</Label>
             <Input
               id="name"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="Enter your name"
+              className="max-w-md"
             />
           </div>
           
           <div className="grid gap-2">
-            <Label htmlFor="email">Email</Label>
+            <Label htmlFor="email" className="text-sm font-medium text-gray-700 dark:text-gray-300">Email</Label>
             <Input
               id="email"
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="Enter your email"
+              className="max-w-md"
             />
           </div>
         </div>
@@ -384,8 +394,9 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
   )
 
   const renderNotificationSettings = () => (
-    <div className="p-8">
-      <h2 className="text-2xl font-semibold mb-6">My notifications</h2>
+    <div className="p-8 max-w-3xl">
+      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">My notifications</h2>
+      <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">Choose how you want to be notified</p>
       
       <div className="space-y-6">
         <div className="space-y-4">
@@ -485,8 +496,9 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
   )
 
   const renderAppearanceSettings = () => (
-    <div className="p-8">
-      <h2 className="text-2xl font-semibold mb-6">Appearance</h2>
+    <div className="p-8 max-w-3xl">
+      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Appearance</h2>
+      <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">Customize how the app looks and feels</p>
       
       <div className="space-y-6">
         <div className="space-y-4">
@@ -538,8 +550,9 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
   )
 
   const renderWorkspaceSettings = () => (
-    <div className="p-8">
-      <h2 className="text-2xl font-semibold mb-6">Workspace settings</h2>
+    <div className="p-8 max-w-3xl">
+      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Workspace settings</h2>
+      <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">Configure your workspace details and preferences</p>
       
       <div className="space-y-6">
         <div className="space-y-4">
@@ -603,8 +616,9 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
   )
 
   const renderSecuritySettings = () => (
-    <div className="p-8">
-      <h2 className="text-2xl font-semibold mb-6">Security</h2>
+    <div className="p-8 max-w-3xl">
+      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Security</h2>
+      <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">Keep your account secure</p>
       
       <div className="space-y-6">
         <div className="space-y-4">
@@ -639,8 +653,9 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
   )
 
   const renderBillingSettings = () => (
-    <div className="p-8">
-      <h2 className="text-2xl font-semibold mb-6">Billing</h2>
+    <div className="p-8 max-w-3xl">
+      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Billing</h2>
+      <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">Manage your subscription and billing</p>
       
       <div className="space-y-6">
         <div className="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
@@ -781,13 +796,11 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
   }, [open, currentSection, workspaceId])
 
   const renderMembersSettings = () => (
-    <div className="p-8">
-      <div className="mb-6">
-        <h2 className="text-2xl font-semibold mb-2">Members</h2>
-        <p className="text-sm text-gray-500 dark:text-gray-400">
-          Manage who has access to this workspace
-        </p>
-      </div>
+    <div className="p-8 max-w-4xl">
+      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Members</h2>
+      <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">
+        Manage who has access to this workspace
+      </p>
 
       {/* Invite Member */}
       <div className="mb-8">
@@ -939,11 +952,14 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl h-[600px] p-0 gap-0 bg-white dark:bg-[#191919]">
+      <DialogContent className="max-w-5xl w-[90vw] h-[80vh] p-0 gap-0 overflow-hidden">
         <DialogTitle className="sr-only">Settings</DialogTitle>
-        <div className="flex h-full">
+        <div className="flex h-full bg-white dark:bg-gray-950 rounded-lg overflow-hidden">
+          {/* Sidebar */}
           {renderSidebar()}
-          <div className="flex-1 overflow-y-auto">
+          
+          {/* Content Area */}
+          <div className="flex-1 bg-white dark:bg-gray-950 overflow-y-auto">
             {renderContent()}
           </div>
         </div>

From ebcecb735e14ddf31be4caaf470bf16978c165ca Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 19:42:54 +0530
Subject: [PATCH 29/43] add support for live doc update

---
 .../page/[pageId]/PageEditorV2.tsx            |  66 +-----
 app/api/pages/[pageId]/content/force/route.ts |  87 +++++++
 app/api/pages/[pageId]/content/route.ts       |   8 +-
 components/editor/NotionEditor.tsx            | 220 +++++++++++++++++-
 lib/services/page-content.ts                  | 120 ++++++++++
 lib/socket/client.tsx                         | 146 +++++++++++-
 server.js                                     |  68 +++++-
 7 files changed, 629 insertions(+), 86 deletions(-)
 create mode 100644 app/api/pages/[pageId]/content/force/route.ts

diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
index 3fd6e6e..7ef1de3 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
@@ -65,7 +65,7 @@ interface PageEditorProps {
 
 export default function PageEditorV2({ page, initialContent, user }: PageEditorProps) {
   const router = useRouter()
-  const { socket, isConnected, joinPage, leavePage, sendContentUpdate } = useSocket()
+  const { isConnected, joinPage, leavePage } = useSocket()
   const [title, setTitle] = useState(page.title || '')
   const [icon, setIcon] = useState(page.icon || '')
   const [coverImage, setCoverImage] = useState(page.coverImage || '')
@@ -73,10 +73,6 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
   const [showIconPicker, setShowIconPicker] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
   const [lastUpdated, setLastUpdated] = useState(page.updatedAt)
-  const [blocks, setBlocks] = useState<Block[]>(initialContent?.blocks || [])
-  const [remoteUpdate, setRemoteUpdate] = useState(0)
-  const lastBroadcastRef = useRef<string>('')
-  const isReceivingUpdate = useRef(false)
   const titleRef = useRef<HTMLTextAreaElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
@@ -99,33 +95,6 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
     }
   }, [isConnected, page.id, page.workspaceId, user, joinPage, leavePage])
 
-  // Listen for content updates from other users
-  useEffect(() => {
-    if (!socket) return
-
-    const handleContentUpdated = (data: { blocks: Block[], userId: string, timestamp: string }) => {
-      // Only process updates from other users
-      if (data.userId !== user?.id) {
-        console.log('Received content update from user:', data.userId)
-        isReceivingUpdate.current = true
-        setRemoteUpdate(prev => prev + 1)
-        setBlocks(data.blocks)
-        setLastUpdated(data.timestamp)
-        
-        // Don't show toast for every update - it's distracting
-        // Only show for significant changes
-        setTimeout(() => {
-          isReceivingUpdate.current = false
-        }, 500)
-      }
-    }
-
-    socket.on('content-updated', handleContentUpdated)
-
-    return () => {
-      socket.off('content-updated', handleContentUpdated)
-    }
-  }, [socket, user?.id])
 
   // Auto-resize title textarea
   useEffect(() => {
@@ -177,29 +146,9 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
     return () => clearTimeout(timeoutId)
   }, [title, page.title, saveTitle])
 
-  // Auto-save page content and broadcast to other users
+  // Auto-save page content
   const handleAutoSave = useCallback(async (newBlocks: Block[]) => {
-    // Don't save if we're receiving an update from another user
-    if (isReceivingUpdate.current) {
-      console.log('Skipping save - receiving remote update')
-      return
-    }
-    
-    // Check if content actually changed by comparing serialized blocks
-    const serializedBlocks = JSON.stringify(newBlocks)
-    if (serializedBlocks === lastBroadcastRef.current) {
-      console.log('Skipping save - no actual changes')
-      return
-    }
-    
     setIsSaving(true)
-    setBlocks(newBlocks)
-    
-    // Broadcast to other users immediately if content changed
-    if (user && serializedBlocks !== lastBroadcastRef.current) {
-      sendContentUpdate(page.id, newBlocks, user.id)
-      lastBroadcastRef.current = serializedBlocks
-    }
     
     try {
       const response = await fetch(`/api/pages/${page.id}/content`, {
@@ -212,8 +161,10 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
         }),
       })
 
+      const data = await response.json()
+      
       if (!response.ok) {
-        throw new Error('Failed to save content')
+        throw new Error(data.error || 'Failed to save content')
       }
       
       // Update the last updated timestamp
@@ -225,7 +176,7 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
     } finally {
       setIsSaving(false)
     }
-  }, [page.id, user, sendContentUpdate])
+  }, [page.id])
 
   const handleAddIcon = () => {
     // For now, just set a random emoji
@@ -332,6 +283,7 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
   const handleRefresh = () => {
     router.refresh()
   }
+  
 
   return (
     <div className="min-h-screen bg-white dark:bg-[#191919]">
@@ -370,12 +322,12 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
           {/* Editor */}
           <div className="mt-2">
             <NotionEditor
-              key={`editor-${remoteUpdate}`}
               pageId={page.id}
-              initialBlocks={blocks.length > 0 ? blocks : initialBlocks}
+              initialBlocks={initialBlocks}
               onAutoSave={handleAutoSave}
               showSaveStatus={false}
               autoSaveInterval={2000}
+              userId={user?.id}
             />
           </div>
         </div>
diff --git a/app/api/pages/[pageId]/content/force/route.ts b/app/api/pages/[pageId]/content/force/route.ts
new file mode 100644
index 0000000..d6eec19
--- /dev/null
+++ b/app/api/pages/[pageId]/content/force/route.ts
@@ -0,0 +1,87 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getCurrentUser } from '@/lib/auth'
+import { prisma } from '@/lib/db/prisma'
+import { pageContentService } from '@/lib/services/page-content'
+import { Block } from '@/types'
+
+// PUT /api/pages/[pageId]/content/force - Force save content (override conflicts)
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ pageId: string }> }
+) {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { pageId } = await params
+    const body = await request.json()
+    const { blocks, force } = body as { blocks: Block[], force: boolean }
+
+    if (!force) {
+      return NextResponse.json(
+        { error: 'Force flag must be set to true' },
+        { status: 400 }
+      )
+    }
+
+    if (!Array.isArray(blocks)) {
+      return NextResponse.json(
+        { error: 'Invalid blocks data' },
+        { status: 400 }
+      )
+    }
+
+    // Check if page exists and user has access
+    const page = await prisma.page.findFirst({
+      where: {
+        id: pageId,
+        isDeleted: false
+      },
+      select: {
+        id: true,
+        workspaceId: true
+      }
+    })
+
+    if (!page) {
+      return NextResponse.json({ error: 'Page not found' }, { status: 404 })
+    }
+
+    // Check if user is a member of the workspace
+    const workspaceMember = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId: page.workspaceId
+        }
+      }
+    })
+
+    if (!workspaceMember) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    // Force save the content
+    const savedContent = await pageContentService.forceClientVersion(pageId, blocks)
+
+    // Update page metadata
+    await prisma.page.update({
+      where: { id: pageId },
+      data: { updatedAt: new Date() }
+    })
+
+    return NextResponse.json({
+      success: true,
+      pageContent: savedContent,
+      forced: true
+    })
+  } catch (error) {
+    console.error('Error force saving content:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/api/pages/[pageId]/content/route.ts b/app/api/pages/[pageId]/content/route.ts
index 7a2a21d..d4438e1 100644
--- a/app/api/pages/[pageId]/content/route.ts
+++ b/app/api/pages/[pageId]/content/route.ts
@@ -122,13 +122,7 @@ export async function PUT(
       return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
     }
 
-    // Save existing content to history before updating
-    const existingContent = await pageContentService.loadPageContent(pageId)
-    if (existingContent) {
-      await pageContentService.saveToHistory(existingContent)
-    }
-
-    // Save new content
+    // Save content immediately (optimized for real-time collaboration)
     const savedContent = await pageContentService.savePageContent(pageId, blocks)
 
     // Update page metadata in PostgreSQL
diff --git a/components/editor/NotionEditor.tsx b/components/editor/NotionEditor.tsx
index a31d080..345b1c9 100644
--- a/components/editor/NotionEditor.tsx
+++ b/components/editor/NotionEditor.tsx
@@ -11,6 +11,7 @@ import { pageContentService } from '@/lib/services/page-content'
 import { Save, Clock, AlertCircle } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import toast from 'react-hot-toast'
+import { useSocket } from '@/lib/socket/client'
 
 interface NotionEditorProps {
   pageId: string
@@ -20,6 +21,8 @@ interface NotionEditorProps {
   readOnly?: boolean
   autoSaveInterval?: number
   showSaveStatus?: boolean
+  userId?: string
+  onBlockUpdateReceived?: (blockId: string, content: any) => void
 }
 
 // Editor state reducer
@@ -77,9 +80,24 @@ export default function NotionEditor({
   onSave,
   onAutoSave,
   readOnly = false,
-  autoSaveInterval = 2000,
-  showSaveStatus = true
+  autoSaveInterval = 5000, // Increased to 5s for full saves
+  showSaveStatus = true,
+  userId,
+  onBlockUpdateReceived
 }: NotionEditorProps) {
+  const { 
+    sendBlockUpdate, 
+    sendBlockAdd, 
+    sendBlockDelete, 
+    sendBlockReorder, 
+    sendContentSync, 
+    onBlockUpdate, 
+    onBlockAdd, 
+    onBlockDelete, 
+    onBlockReorder, 
+    onContentSync, 
+    isConnected 
+  } = useSocket()
   const [editorState, dispatch] = useReducer(editorReducer, {
     blocks: initialBlocks,
     selectedBlockId: null,
@@ -174,7 +192,7 @@ export default function NotionEditor({
     }
   }, [blocks, onAutoSave, onSave, readOnly, saveStatus])
 
-  // Auto-save effect
+  // Auto-save effect (for persistent storage, less frequent)
   useEffect(() => {
     if (!readOnly && blocks.length > 0 && !isProcessingRemoteUpdate.current) {
       // Only check for changes if we're not processing a remote update
@@ -200,6 +218,17 @@ export default function NotionEditor({
       }
     }
   }, [blocks, performAutoSave, autoSaveInterval, readOnly])
+  
+  // Send full content sync periodically (every 10 seconds)
+  useEffect(() => {
+    if (!readOnly && isConnected && userId && blocks.length > 0) {
+      const syncInterval = setInterval(() => {
+        sendContentSync(pageId, blocks, userId)
+      }, 10000) // Sync every 10 seconds
+      
+      return () => clearInterval(syncInterval)
+    }
+  }, [blocks, isConnected, userId, pageId, readOnly, sendContentSync])
 
   // We'll initialize with empty block after addBlock is defined
 
@@ -274,10 +303,15 @@ export default function NotionEditor({
       payload: { block: newBlock, index: insertIndex }
     })
     
+    // Send real-time block addition
+    if (!readOnly && isConnected && userId) {
+      sendBlockAdd(pageId, newBlock, insertIndex, userId)
+    }
+    
     setShowSlashMenu(false)
     
     return newBlock.id
-  }, [blocks])
+  }, [blocks, readOnly, isConnected, userId, pageId, sendBlockAdd])
 
   // Track if we've initialized an empty block
   const hasInitializedRef = useRef(false)
@@ -290,12 +324,176 @@ export default function NotionEditor({
     }
   }, [blocks.length, readOnly, editorState.isLoading, addBlock])
 
+  // Debounce helper
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null)
+  
+  // Debounced function to send block updates via WebSocket
+  const sendBlockUpdateDebounced = useCallback((blockId: string, content: any) => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current)
+    }
+    
+    debounceTimerRef.current = setTimeout(() => {
+      if (isConnected && userId) {
+        sendBlockUpdate(pageId, blockId, content, userId)
+      }
+    }, 100) // Send updates after 100ms of no typing
+  }, [isConnected, userId, sendBlockUpdate, pageId])
+  
   const updateBlock = useCallback((blockId: string, updates: Partial<BlockType>) => {
+    // Update local state immediately
     dispatch({
       type: 'UPDATE_BLOCK',
       payload: { id: blockId, updates }
     })
-  }, [])
+    
+    // Send real-time update via WebSocket for any changes
+    if (!readOnly) {
+      sendBlockUpdateDebounced(blockId, updates)
+    }
+  }, [readOnly, sendBlockUpdateDebounced])
+  
+  // Listen for block updates from other users
+  useEffect(() => {
+    if (!onBlockUpdate) return
+    
+    const cleanup = onBlockUpdate((data: { blockId: string; content: any; userId: string }) => {
+      // Don't apply updates from ourselves
+      if (data.userId === userId) return
+      
+      // Mark as processing remote update to prevent auto-save
+      isProcessingRemoteUpdate.current = true
+      
+      // Update the specific block
+      dispatch({
+        type: 'UPDATE_BLOCK',
+        payload: {
+          id: data.blockId,
+          updates: data.content // This is the full updates object now
+        }
+      })
+      
+      // Reset flag after processing
+      setTimeout(() => {
+        isProcessingRemoteUpdate.current = false
+      }, 100)
+      
+      // Notify parent component if needed
+      onBlockUpdateReceived?.(data.blockId, data.content)
+    })
+    
+    return cleanup
+  }, [onBlockUpdate, userId, onBlockUpdateReceived])
+  
+  // Listen for block additions from other users
+  useEffect(() => {
+    if (!onBlockAdd) return
+    
+    const cleanup = onBlockAdd((data: { block: BlockType; index: number; userId: string }) => {
+      // Don't apply additions from ourselves
+      if (data.userId === userId) return
+      
+      // Mark as processing remote update
+      isProcessingRemoteUpdate.current = true
+      
+      // Add the block at the specified index
+      dispatch({
+        type: 'ADD_BLOCK',
+        payload: {
+          block: data.block,
+          index: data.index
+        }
+      })
+      
+      // Reset flag after processing
+      setTimeout(() => {
+        isProcessingRemoteUpdate.current = false
+      }, 100)
+    })
+    
+    return cleanup
+  }, [onBlockAdd, userId])
+  
+  // Listen for block deletions from other users
+  useEffect(() => {
+    if (!onBlockDelete) return
+    
+    const cleanup = onBlockDelete((data: { blockId: string; userId: string }) => {
+      // Don't apply deletions from ourselves
+      if (data.userId === userId) return
+      
+      // Mark as processing remote update
+      isProcessingRemoteUpdate.current = true
+      
+      // Delete the block
+      dispatch({
+        type: 'DELETE_BLOCK',
+        payload: data.blockId
+      })
+      
+      // Reset flag after processing
+      setTimeout(() => {
+        isProcessingRemoteUpdate.current = false
+      }, 100)
+    })
+    
+    return cleanup
+  }, [onBlockDelete, userId])
+  
+  // Listen for block reorders from other users
+  useEffect(() => {
+    if (!onBlockReorder) return
+    
+    const cleanup = onBlockReorder((data: { blockId: string; newIndex: number; userId: string }) => {
+      // Don't apply reorders from ourselves
+      if (data.userId === userId) return
+      
+      // Mark as processing remote update
+      isProcessingRemoteUpdate.current = true
+      
+      // Reorder the block
+      dispatch({
+        type: 'MOVE_BLOCK',
+        payload: {
+          id: data.blockId,
+          newIndex: data.newIndex
+        }
+      })
+      
+      // Reset flag after processing
+      setTimeout(() => {
+        isProcessingRemoteUpdate.current = false
+      }, 100)
+    })
+    
+    return cleanup
+  }, [onBlockReorder, userId])
+  
+  // Listen for full content syncs
+  useEffect(() => {
+    if (!onContentSync) return
+    
+    const cleanup = onContentSync((data: { blocks: BlockType[]; userId: string }) => {
+      // Don't apply syncs from ourselves
+      if (data.userId === userId) return
+      
+      // Mark as processing remote update
+      isProcessingRemoteUpdate.current = true
+      
+      // Full sync - replace all blocks
+      dispatch({
+        type: 'SET_BLOCKS',
+        payload: data.blocks
+      })
+      
+      // Reset flag after processing
+      setTimeout(() => {
+        isProcessingRemoteUpdate.current = false
+      }, 500)
+    })
+    
+    return cleanup
+  }, [onContentSync, userId])
 
   const deleteBlock = useCallback((blockId: string) => {
     if (blocks.length <= 1) {
@@ -306,8 +504,13 @@ export default function NotionEditor({
         type: 'DELETE_BLOCK',
         payload: blockId
       })
+      
+      // Send real-time block deletion
+      if (!readOnly && isConnected && userId) {
+        sendBlockDelete(pageId, blockId, userId)
+      }
     }
-  }, [blocks.length, updateBlock])
+  }, [blocks.length, updateBlock, readOnly, isConnected, userId, pageId, sendBlockDelete])
 
   const handleDragStart = (event: any) => {
     const block = blocks.find(b => b.id === event.active.id)
@@ -327,6 +530,11 @@ export default function NotionEditor({
           type: 'MOVE_BLOCK',
           payload: { id: active.id as string, newIndex }
         })
+        
+        // Send real-time block reorder
+        if (!readOnly && isConnected && userId) {
+          sendBlockReorder(pageId, active.id as string, newIndex, userId)
+        }
       }
     }
   }
diff --git a/lib/services/page-content.ts b/lib/services/page-content.ts
index eb42db7..f700d71 100644
--- a/lib/services/page-content.ts
+++ b/lib/services/page-content.ts
@@ -1,6 +1,16 @@
 import { getMongoDb } from '@/lib/db/mongodb'
 import { Block, PageContent } from '@/types'
 
+interface MergeResult {
+  mergedBlocks: Block[]
+  hasConflicts: boolean
+  conflicts: Array<{
+    blockId: string
+    originalContent: any
+    incomingContent: any
+  }>
+}
+
 export class PageContentService {
   private async getDb() {
     return await getMongoDb()
@@ -221,6 +231,116 @@ export class PageContentService {
     
     return updated
   }
+
+  /**
+   * Merge conflicting changes from two users
+   * Uses a three-way merge strategy
+   */
+  async mergeChanges(
+    pageId: string,
+    serverBlocks: Block[],
+    clientBlocks: Block[],
+    userId: string
+  ): Promise<MergeResult> {
+    const conflicts: MergeResult['conflicts'] = []
+    const mergedBlocks: Block[] = []
+    
+    // Create maps for easy lookup
+    const serverBlockMap = new Map(serverBlocks.map(b => [b.id, b]))
+    const clientBlockMap = new Map(clientBlocks.map(b => [b.id, b]))
+    
+    // Track which blocks we've processed
+    const processedIds = new Set<string>()
+    
+    // Process blocks that exist in both versions
+    for (const clientBlock of clientBlocks) {
+      processedIds.add(clientBlock.id)
+      const serverBlock = serverBlockMap.get(clientBlock.id)
+      
+      if (serverBlock) {
+        // Block exists in both - check for conflicts
+        const clientContent = JSON.stringify(clientBlock.content)
+        const serverContent = JSON.stringify(serverBlock.content)
+        
+        if (clientContent !== serverContent) {
+          // Content differs - this is a conflict
+          // For now, we'll prefer the client's version but track the conflict
+          conflicts.push({
+            blockId: clientBlock.id,
+            originalContent: serverBlock.content,
+            incomingContent: clientBlock.content
+          })
+          
+          // Use client version but mark it as having a conflict
+          mergedBlocks.push({
+            ...clientBlock,
+            properties: {
+              ...clientBlock.properties,
+              hasConflict: true,
+              conflictedAt: new Date(),
+              conflictedBy: userId
+            }
+          })
+        } else {
+          // No conflict - use the block as is
+          mergedBlocks.push(clientBlock)
+        }
+      } else {
+        // Block only exists in client - it's a new block
+        mergedBlocks.push(clientBlock)
+      }
+    }
+    
+    // Add blocks that only exist on server (were added by another user)
+    for (const serverBlock of serverBlocks) {
+      if (!processedIds.has(serverBlock.id)) {
+        // This block was added by another user - include it
+        mergedBlocks.push({
+          ...serverBlock,
+          properties: {
+            ...serverBlock.properties,
+            addedByOtherUser: true,
+            addedAt: new Date()
+          }
+        })
+      }
+    }
+    
+    // Sort blocks by order to maintain structure
+    mergedBlocks.sort((a, b) => (a.order || 0) - (b.order || 0))
+    
+    // Re-index order values
+    mergedBlocks.forEach((block, index) => {
+      block.order = index
+    })
+    
+    return {
+      mergedBlocks,
+      hasConflicts: conflicts.length > 0,
+      conflicts
+    }
+  }
+
+  /**
+   * Get conflict-free version by accepting all server changes
+   */
+  async acceptServerVersion(pageId: string): Promise<PageContent | null> {
+    return await this.loadPageContent(pageId)
+  }
+
+  /**
+   * Force save client version (overwrite server)
+   */
+  async forceClientVersion(pageId: string, blocks: Block[]): Promise<PageContent> {
+    // Save current as history first
+    const current = await this.loadPageContent(pageId)
+    if (current) {
+      await this.saveToHistory(current)
+    }
+    
+    // Force save the client version
+    return await this.savePageContent(pageId, blocks)
+  }
 }
 
 // Export singleton instance
diff --git a/lib/socket/client.tsx b/lib/socket/client.tsx
index ac5e156..379cc3c 100644
--- a/lib/socket/client.tsx
+++ b/lib/socket/client.tsx
@@ -11,11 +11,20 @@ interface SocketContextType {
   currentPageId: string | null
   joinPage: (pageId: string, workspaceId: string, user: any) => void
   leavePage: () => void
-  sendContentUpdate: (pageId: string, blocks: any[], userId: string) => void
+  sendBlockUpdate: (pageId: string, blockId: string, content: any, userId: string) => void
+  sendBlockAdd: (pageId: string, block: any, index: number, userId: string) => void
+  sendBlockDelete: (pageId: string, blockId: string, userId: string) => void
+  sendBlockReorder: (pageId: string, blockId: string, newIndex: number, userId: string) => void
+  sendContentSync: (pageId: string, blocks: any[], userId: string) => void
   sendCursorPosition: (pageId: string, position: { x: number; y: number }) => void
   sendSelection: (pageId: string, selection: { start: number; end: number } | null) => void
   sendTypingStart: (pageId: string, blockId: string) => void
   sendTypingStop: (pageId: string, blockId: string) => void
+  onBlockUpdate?: (callback: (data: any) => void) => void
+  onBlockAdd?: (callback: (data: any) => void) => void
+  onBlockDelete?: (callback: (data: any) => void) => void
+  onBlockReorder?: (callback: (data: any) => void) => void
+  onContentSync?: (callback: (data: any) => void) => void
 }
 
 const SocketContext = createContext<SocketContextType>({
@@ -25,11 +34,20 @@ const SocketContext = createContext<SocketContextType>({
   currentPageId: null,
   joinPage: () => {},
   leavePage: () => {},
-  sendContentUpdate: () => {},
+  sendBlockUpdate: () => {},
+  sendBlockAdd: () => {},
+  sendBlockDelete: () => {},
+  sendBlockReorder: () => {},
+  sendContentSync: () => {},
   sendCursorPosition: () => {},
   sendSelection: () => {},
   sendTypingStart: () => {},
   sendTypingStop: () => {},
+  onBlockUpdate: () => {},
+  onBlockAdd: () => {},
+  onBlockDelete: () => {},
+  onBlockReorder: () => {},
+  onContentSync: () => {},
 })
 
 export function SocketProvider({ children }: { children: ReactNode }) {
@@ -132,16 +150,111 @@ export function SocketProvider({ children }: { children: ReactNode }) {
     setCurrentPageId(null)
     // Socket will automatically leave rooms on disconnect
   }, [])
-
-  const lastContentUpdate = useRef<string>('')
   
-  const sendContentUpdate = useCallback((pageId: string, blocks: any[], userId: string) => {
+  // Send individual block updates (real-time)
+  const sendBlockUpdate = useCallback((pageId: string, blockId: string, content: any, userId: string) => {
+    if (socket && socket.connected) {
+      socket.emit('block-update', { 
+        pageId, 
+        blockId, 
+        content, 
+        userId 
+      })
+    }
+  }, [socket])
+  
+  // Send block addition
+  const sendBlockAdd = useCallback((pageId: string, block: any, index: number, userId: string) => {
+    if (socket && socket.connected) {
+      socket.emit('block-add', { 
+        pageId, 
+        block, 
+        index, 
+        userId 
+      })
+    }
+  }, [socket])
+  
+  // Send block deletion
+  const sendBlockDelete = useCallback((pageId: string, blockId: string, userId: string) => {
+    if (socket && socket.connected) {
+      socket.emit('block-delete', { 
+        pageId, 
+        blockId, 
+        userId 
+      })
+    }
+  }, [socket])
+  
+  // Send block reorder
+  const sendBlockReorder = useCallback((pageId: string, blockId: string, newIndex: number, userId: string) => {
+    if (socket && socket.connected) {
+      socket.emit('block-reorder', { 
+        pageId, 
+        blockId, 
+        newIndex, 
+        userId 
+      })
+    }
+  }, [socket])
+  
+  // Send full content sync (less frequent)
+  const sendContentSync = useCallback((pageId: string, blocks: any[], userId: string) => {
     if (socket && socket.connected) {
-      // Only send if content actually changed
-      const contentHash = JSON.stringify({ pageId, blocks, userId })
-      if (contentHash !== lastContentUpdate.current) {
-        socket.emit('content-update', { pageId, blocks, userId })
-        lastContentUpdate.current = contentHash
+      socket.emit('content-sync', { 
+        pageId, 
+        blocks, 
+        userId 
+      })
+    }
+  }, [socket])
+  
+  // Register block update listener
+  const onBlockUpdate = useCallback((callback: (data: any) => void) => {
+    if (socket) {
+      socket.on('block-updated', callback)
+      return () => {
+        socket.off('block-updated', callback)
+      }
+    }
+  }, [socket])
+  
+  // Register block add listener
+  const onBlockAdd = useCallback((callback: (data: any) => void) => {
+    if (socket) {
+      socket.on('block-added', callback)
+      return () => {
+        socket.off('block-added', callback)
+      }
+    }
+  }, [socket])
+  
+  // Register block delete listener
+  const onBlockDelete = useCallback((callback: (data: any) => void) => {
+    if (socket) {
+      socket.on('block-deleted', callback)
+      return () => {
+        socket.off('block-deleted', callback)
+      }
+    }
+  }, [socket])
+  
+  // Register block reorder listener
+  const onBlockReorder = useCallback((callback: (data: any) => void) => {
+    if (socket) {
+      socket.on('block-reordered', callback)
+      return () => {
+        socket.off('block-reordered', callback)
+      }
+    }
+  }, [socket])
+  
+  // Register content sync listener
+  const onContentSync = useCallback((callback: (data: any) => void) => {
+    if (socket) {
+      socket.on('content-synced', callback)
+      return () => {
+        socket.off('content-synced', callback)
       }
     }
   }, [socket])
@@ -178,11 +291,20 @@ export function SocketProvider({ children }: { children: ReactNode }) {
       currentPageId,
       joinPage,
       leavePage,
-      sendContentUpdate,
+      sendBlockUpdate,
+      sendBlockAdd,
+      sendBlockDelete,
+      sendBlockReorder,
+      sendContentSync,
       sendCursorPosition,
       sendSelection,
       sendTypingStart,
-      sendTypingStop
+      sendTypingStop,
+      onBlockUpdate,
+      onBlockAdd,
+      onBlockDelete,
+      onBlockReorder,
+      onContentSync
     }}>
       {children}
     </SocketContext.Provider>
diff --git a/server.js b/server.js
index fa2ec31..954e359 100644
--- a/server.js
+++ b/server.js
@@ -101,14 +101,74 @@ app.prepare().then(() => {
       console.log(`✅ User ${user.name} (${user.id}) joined room ${roomId}. Total users: ${room.size}`)
     })
 
-    // Handle content updates
-    socket.on('content-update', (data) => {
+    // Handle individual block updates (real-time)
+    socket.on('block-update', (data) => {
       if (!currentRoom) return
       
       const room = pageRooms.get(currentRoom)
       if (room && room.size > 1) {
-        console.log(`📝 Broadcasting content update in ${currentRoom} to ${room.size - 1} other users`)
-        socket.to(currentRoom).emit('content-updated', {
+        // Broadcast block update immediately to other users
+        socket.to(currentRoom).emit('block-updated', {
+          blockId: data.blockId,
+          content: data.content,
+          userId: data.userId,
+          timestamp: new Date().toISOString()
+        })
+      }
+    })
+    
+    // Handle block addition
+    socket.on('block-add', (data) => {
+      if (!currentRoom) return
+      
+      const room = pageRooms.get(currentRoom)
+      if (room && room.size > 1) {
+        socket.to(currentRoom).emit('block-added', {
+          block: data.block,
+          index: data.index,
+          userId: data.userId,
+          timestamp: new Date().toISOString()
+        })
+      }
+    })
+    
+    // Handle block deletion
+    socket.on('block-delete', (data) => {
+      if (!currentRoom) return
+      
+      const room = pageRooms.get(currentRoom)
+      if (room && room.size > 1) {
+        socket.to(currentRoom).emit('block-deleted', {
+          blockId: data.blockId,
+          userId: data.userId,
+          timestamp: new Date().toISOString()
+        })
+      }
+    })
+    
+    // Handle block reorder
+    socket.on('block-reorder', (data) => {
+      if (!currentRoom) return
+      
+      const room = pageRooms.get(currentRoom)
+      if (room && room.size > 1) {
+        socket.to(currentRoom).emit('block-reordered', {
+          blockId: data.blockId,
+          newIndex: data.newIndex,
+          userId: data.userId,
+          timestamp: new Date().toISOString()
+        })
+      }
+    })
+    
+    // Handle full content sync (periodic)
+    socket.on('content-sync', (data) => {
+      if (!currentRoom) return
+      
+      const room = pageRooms.get(currentRoom)
+      if (room && room.size > 1) {
+        console.log(`🔄 Syncing content in ${currentRoom}`)
+        socket.to(currentRoom).emit('content-synced', {
           blocks: data.blocks,
           userId: data.userId,
           timestamp: new Date().toISOString()

From 6ad261b3f54ae00199a64dc6bf7d2dadb81bd21c Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 19:53:54 +0530
Subject: [PATCH 30/43] presence indicator

---
 components/editor/BlockV2.tsx      | 28 +++++++++++--
 components/editor/NotionEditor.tsx | 67 ++++++++++++++++++++++++++++--
 lib/socket/client.tsx              | 54 ++++++++++++++++++++++++
 server.js                          | 31 ++++++++++++++
 4 files changed, 174 insertions(+), 6 deletions(-)

diff --git a/components/editor/BlockV2.tsx b/components/editor/BlockV2.tsx
index 99d4619..9eaede8 100644
--- a/components/editor/BlockV2.tsx
+++ b/components/editor/BlockV2.tsx
@@ -26,8 +26,10 @@ interface BlockV2Props {
   onAddBlock?: (type: BlockTypeEnum, afterBlockId?: string) => string
   onSlashCommand?: (blockId: string, position: { top: number, left: number }) => void
   onFocus?: (blockId: string) => void
+  onBlur?: (blockId: string) => void
   readOnly?: boolean
   isSelected?: boolean
+  userPresence?: { userId: string; userName: string; userColor: string }
 }
 
 export default function BlockV2({
@@ -37,8 +39,10 @@ export default function BlockV2({
   onAddBlock,
   onSlashCommand,
   onFocus,
+  onBlur,
   readOnly = false,
-  isSelected = false
+  isSelected = false,
+  userPresence
 }: BlockV2Props) {
   const [isHovered, setIsHovered] = useState(false)
   const [isFocused, setIsFocused] = useState(false)
@@ -131,7 +135,8 @@ export default function BlockV2({
 
   const handleBlur = useCallback(() => {
     setIsFocused(false)
-  }, [])
+    onBlur?.(block.id)
+  }, [block.id, onBlur])
 
   // Get current block content  
   const getBlockContent = useCallback((): string => {
@@ -441,10 +446,27 @@ export default function BlockV2({
         className={cn(
           "block-content relative py-1 min-h-[1.5rem]",
           isSelected && "bg-blue-50 dark:bg-blue-950/20 rounded-sm",
-          isFocused && "bg-blue-25 dark:bg-blue-900/10 rounded-sm"
+          isFocused && "bg-blue-25 dark:bg-blue-900/10 rounded-sm",
+          userPresence && "ring-2 transition-all duration-200"
         )}
+        style={{
+          ...(userPresence && {
+            borderColor: userPresence.userColor,
+            boxShadow: `0 0 0 2px ${userPresence.userColor}20`
+          })
+        }}
         data-block-id={block.id}
       >
+        {/* User presence indicator */}
+        {userPresence && (
+          <div 
+            className="absolute -top-6 left-0 flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium text-white shadow-lg z-20 animate-in fade-in slide-in-from-bottom-1 duration-200"
+            style={{ backgroundColor: userPresence.userColor }}
+          >
+            <div className="w-1.5 h-1.5 bg-white rounded-full animate-pulse" />
+            {userPresence.userName}
+          </div>
+        )}
         {renderBlockContent()}
       </div>
     </div>
diff --git a/components/editor/NotionEditor.tsx b/components/editor/NotionEditor.tsx
index 345b1c9..093165c 100644
--- a/components/editor/NotionEditor.tsx
+++ b/components/editor/NotionEditor.tsx
@@ -89,12 +89,16 @@ export default function NotionEditor({
     sendBlockUpdate, 
     sendBlockAdd, 
     sendBlockDelete, 
-    sendBlockReorder, 
+    sendBlockReorder,
+    sendBlockFocus,
+    sendBlockBlur, 
     sendContentSync, 
     onBlockUpdate, 
     onBlockAdd, 
     onBlockDelete, 
-    onBlockReorder, 
+    onBlockReorder,
+    onBlockFocus,
+    onBlockBlur, 
     onContentSync, 
     isConnected 
   } = useSocket()
@@ -109,6 +113,7 @@ export default function NotionEditor({
   const [slashMenuPosition, setSlashMenuPosition] = useState({ top: 0, left: 0 })
   const [saveStatus, setSaveStatus] = useState<SaveStatus>('saved')
   const [draggedBlock, setDraggedBlock] = useState<BlockType | null>(null)
+  const [blockUsers, setBlockUsers] = useState<Map<string, { userId: string; userName: string; userColor: string }>>(new Map())
   const editorRef = useRef<HTMLDivElement>(null)
   const autoSaveTimeoutRef = useRef<NodeJS.Timeout>()
   
@@ -469,6 +474,49 @@ export default function NotionEditor({
     return cleanup
   }, [onBlockReorder, userId])
   
+  // Listen for block focus events from other users
+  useEffect(() => {
+    if (!onBlockFocus) return
+    
+    const cleanup = onBlockFocus((data: { blockId: string; userId: string; userName: string; userColor: string }) => {
+      // Don't show our own focus
+      if (data.userId === userId) return
+      
+      setBlockUsers(prev => {
+        const newMap = new Map(prev)
+        newMap.set(data.blockId, {
+          userId: data.userId,
+          userName: data.userName,
+          userColor: data.userColor
+        })
+        return newMap
+      })
+    })
+    
+    return cleanup
+  }, [onBlockFocus, userId])
+  
+  // Listen for block blur events from other users
+  useEffect(() => {
+    if (!onBlockBlur) return
+    
+    const cleanup = onBlockBlur((data: { blockId: string; userId: string }) => {
+      // Don't process our own blur
+      if (data.userId === userId) return
+      
+      setBlockUsers(prev => {
+        const newMap = new Map(prev)
+        const currentUser = newMap.get(data.blockId)
+        if (currentUser?.userId === data.userId) {
+          newMap.delete(data.blockId)
+        }
+        return newMap
+      })
+    })
+    
+    return cleanup
+  }, [onBlockBlur, userId])
+  
   // Listen for full content syncs
   useEffect(() => {
     if (!onContentSync) return
@@ -674,9 +722,22 @@ export default function NotionEditor({
                 onDelete={deleteBlock}
                 onAddBlock={(type, afterBlockId) => addBlock(type, undefined, afterBlockId)}
                 onSlashCommand={handleSlashCommand}
-                onFocus={(blockId) => dispatch({ type: 'SELECT_BLOCK', payload: blockId })}
+                onFocus={(blockId) => {
+                  dispatch({ type: 'SELECT_BLOCK', payload: blockId })
+                  // Send focus event to other users
+                  if (!readOnly && isConnected && userId) {
+                    sendBlockFocus(pageId, blockId, userId)
+                  }
+                }}
+                onBlur={(blockId) => {
+                  // Send blur event to other users
+                  if (!readOnly && isConnected && userId) {
+                    sendBlockBlur(pageId, blockId, userId)
+                  }
+                }}
                 readOnly={readOnly}
                 isSelected={block.id === editorState.selectedBlockId}
+                userPresence={blockUsers.get(block.id)}
               />
             ))}
           </SortableContext>
diff --git a/lib/socket/client.tsx b/lib/socket/client.tsx
index 379cc3c..2fc554c 100644
--- a/lib/socket/client.tsx
+++ b/lib/socket/client.tsx
@@ -15,6 +15,8 @@ interface SocketContextType {
   sendBlockAdd: (pageId: string, block: any, index: number, userId: string) => void
   sendBlockDelete: (pageId: string, blockId: string, userId: string) => void
   sendBlockReorder: (pageId: string, blockId: string, newIndex: number, userId: string) => void
+  sendBlockFocus: (pageId: string, blockId: string, userId: string) => void
+  sendBlockBlur: (pageId: string, blockId: string, userId: string) => void
   sendContentSync: (pageId: string, blocks: any[], userId: string) => void
   sendCursorPosition: (pageId: string, position: { x: number; y: number }) => void
   sendSelection: (pageId: string, selection: { start: number; end: number } | null) => void
@@ -24,6 +26,8 @@ interface SocketContextType {
   onBlockAdd?: (callback: (data: any) => void) => void
   onBlockDelete?: (callback: (data: any) => void) => void
   onBlockReorder?: (callback: (data: any) => void) => void
+  onBlockFocus?: (callback: (data: any) => void) => void
+  onBlockBlur?: (callback: (data: any) => void) => void
   onContentSync?: (callback: (data: any) => void) => void
 }
 
@@ -38,6 +42,8 @@ const SocketContext = createContext<SocketContextType>({
   sendBlockAdd: () => {},
   sendBlockDelete: () => {},
   sendBlockReorder: () => {},
+  sendBlockFocus: () => {},
+  sendBlockBlur: () => {},
   sendContentSync: () => {},
   sendCursorPosition: () => {},
   sendSelection: () => {},
@@ -47,6 +53,8 @@ const SocketContext = createContext<SocketContextType>({
   onBlockAdd: () => {},
   onBlockDelete: () => {},
   onBlockReorder: () => {},
+  onBlockFocus: () => {},
+  onBlockBlur: () => {},
   onContentSync: () => {},
 })
 
@@ -198,6 +206,28 @@ export function SocketProvider({ children }: { children: ReactNode }) {
     }
   }, [socket])
   
+  // Send block focus (user starts editing)
+  const sendBlockFocus = useCallback((pageId: string, blockId: string, userId: string) => {
+    if (socket && socket.connected) {
+      socket.emit('block-focus', { 
+        pageId, 
+        blockId, 
+        userId 
+      })
+    }
+  }, [socket])
+  
+  // Send block blur (user stops editing)
+  const sendBlockBlur = useCallback((pageId: string, blockId: string, userId: string) => {
+    if (socket && socket.connected) {
+      socket.emit('block-blur', { 
+        pageId, 
+        blockId, 
+        userId 
+      })
+    }
+  }, [socket])
+  
   // Send full content sync (less frequent)
   const sendContentSync = useCallback((pageId: string, blocks: any[], userId: string) => {
     if (socket && socket.connected) {
@@ -249,6 +279,26 @@ export function SocketProvider({ children }: { children: ReactNode }) {
     }
   }, [socket])
   
+  // Register block focus listener
+  const onBlockFocus = useCallback((callback: (data: any) => void) => {
+    if (socket) {
+      socket.on('block-focused', callback)
+      return () => {
+        socket.off('block-focused', callback)
+      }
+    }
+  }, [socket])
+  
+  // Register block blur listener
+  const onBlockBlur = useCallback((callback: (data: any) => void) => {
+    if (socket) {
+      socket.on('block-blurred', callback)
+      return () => {
+        socket.off('block-blurred', callback)
+      }
+    }
+  }, [socket])
+  
   // Register content sync listener
   const onContentSync = useCallback((callback: (data: any) => void) => {
     if (socket) {
@@ -295,6 +345,8 @@ export function SocketProvider({ children }: { children: ReactNode }) {
       sendBlockAdd,
       sendBlockDelete,
       sendBlockReorder,
+      sendBlockFocus,
+      sendBlockBlur,
       sendContentSync,
       sendCursorPosition,
       sendSelection,
@@ -304,6 +356,8 @@ export function SocketProvider({ children }: { children: ReactNode }) {
       onBlockAdd,
       onBlockDelete,
       onBlockReorder,
+      onBlockFocus,
+      onBlockBlur,
       onContentSync
     }}>
       {children}
diff --git a/server.js b/server.js
index 954e359..3d6834f 100644
--- a/server.js
+++ b/server.js
@@ -161,6 +161,37 @@ app.prepare().then(() => {
       }
     })
     
+    // Handle block focus (user starts editing a block)
+    socket.on('block-focus', (data) => {
+      if (!currentRoom) return
+      
+      const room = pageRooms.get(currentRoom)
+      if (room && room.size > 1) {
+        const userInfo = room.get(data.userId)
+        socket.to(currentRoom).emit('block-focused', {
+          blockId: data.blockId,
+          userId: data.userId,
+          userName: userInfo?.name || 'Anonymous',
+          userColor: userInfo?.color || '#4ECDC4',
+          timestamp: new Date().toISOString()
+        })
+      }
+    })
+    
+    // Handle block blur (user stops editing a block)
+    socket.on('block-blur', (data) => {
+      if (!currentRoom) return
+      
+      const room = pageRooms.get(currentRoom)
+      if (room && room.size > 1) {
+        socket.to(currentRoom).emit('block-blurred', {
+          blockId: data.blockId,
+          userId: data.userId,
+          timestamp: new Date().toISOString()
+        })
+      }
+    })
+    
     // Handle full content sync (periodic)
     socket.on('content-sync', (data) => {
       if (!currentRoom) return

From 897697cf8db9b799bc12ed1b64aae54040b95282 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 19:57:04 +0530
Subject: [PATCH 31/43] block with presence indicator

---
 components/editor/BlockV2.tsx | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/components/editor/BlockV2.tsx b/components/editor/BlockV2.tsx
index 9eaede8..10852da 100644
--- a/components/editor/BlockV2.tsx
+++ b/components/editor/BlockV2.tsx
@@ -428,6 +428,19 @@ export default function BlockV2({
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
+      {/* User presence avatar positioned to the left of block handle */}
+      {userPresence && (
+        <div className="absolute -left-20 top-1 z-10">
+          <div 
+            className="w-7 h-7 rounded-full flex items-center justify-center text-white text-xs font-semibold shadow-lg animate-in fade-in zoom-in-50 duration-200 cursor-default"
+            style={{ backgroundColor: userPresence.userColor }}
+            title={`${userPresence.userName} is editing`}
+          >
+            {userPresence.userName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
+          </div>
+        </div>
+      )}
+      
       {/* Block handle positioned with negative margin */}
       <div className="absolute -left-12 top-1 z-10">
         <BlockHandle
@@ -447,26 +460,17 @@ export default function BlockV2({
           "block-content relative py-1 min-h-[1.5rem]",
           isSelected && "bg-blue-50 dark:bg-blue-950/20 rounded-sm",
           isFocused && "bg-blue-25 dark:bg-blue-900/10 rounded-sm",
-          userPresence && "ring-2 transition-all duration-200"
+          userPresence && "transition-all duration-200"
         )}
         style={{
           ...(userPresence && {
-            borderColor: userPresence.userColor,
-            boxShadow: `0 0 0 2px ${userPresence.userColor}20`
+            borderLeft: `3px solid ${userPresence.userColor}`,
+            paddingLeft: '8px',
+            marginLeft: '-8px'
           })
         }}
         data-block-id={block.id}
       >
-        {/* User presence indicator */}
-        {userPresence && (
-          <div 
-            className="absolute -top-6 left-0 flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium text-white shadow-lg z-20 animate-in fade-in slide-in-from-bottom-1 duration-200"
-            style={{ backgroundColor: userPresence.userColor }}
-          >
-            <div className="w-1.5 h-1.5 bg-white rounded-full animate-pulse" />
-            {userPresence.userName}
-          </div>
-        )}
         {renderBlockContent()}
       </div>
     </div>

From d1657bb24e3da1c20705903dea15ffaefe288c37 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 20:09:38 +0530
Subject: [PATCH 32/43] fixed minor bugs

---
 components/settings/SettingsModal.tsx | 20 ++++++----
 components/ui/avatar-upload.tsx       | 56 ++++++++++++++++++++-------
 2 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
index ec8bf73..0333f16 100644
--- a/components/settings/SettingsModal.tsx
+++ b/components/settings/SettingsModal.tsx
@@ -185,13 +185,15 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
       {/* User Profile Section */}
       <div className="p-4 border-b border-gray-200 dark:border-gray-800">
         <div className="flex items-center gap-3">
-          <AvatarUpload
-            currentAvatarUrl={avatarUrl}
-            userName={user?.name}
-            userEmail={user?.email}
-            size="sm"
-            editable={false}
-          />
+          <div className="flex-shrink-0">
+            <AvatarUpload
+              currentAvatarUrl={avatarUrl}
+              userName={user?.name}
+              userEmail={user?.email}
+              size="sm"
+              editable={false}
+            />
+          </div>
           <div className="flex-1 min-w-0">
             <h2 className="text-sm font-semibold truncate">{user?.name || 'User'}</h2>
             <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{user?.email}</p>
@@ -335,6 +337,10 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
             }}
             size="lg"
           />
+          <div>
+            <h3 className="text-sm font-medium text-gray-900 dark:text-white">Profile Photo</h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400">Upload a photo to personalize your account</p>
+          </div>
         </div>
         
         <div className="space-y-4">
diff --git a/components/ui/avatar-upload.tsx b/components/ui/avatar-upload.tsx
index 6494aee..bb37591 100644
--- a/components/ui/avatar-upload.tsx
+++ b/components/ui/avatar-upload.tsx
@@ -29,9 +29,9 @@ export function AvatarUpload({
   const fileInputRef = useRef<HTMLInputElement>(null)
   
   const sizeClasses = {
-    sm: "h-10 w-10",
-    md: "h-20 w-20",
-    lg: "h-32 w-32"
+    sm: "h-8 w-8",
+    md: "h-12 w-12",
+    lg: "h-16 w-16"
   }
   
   const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -125,9 +125,13 @@ export function AvatarUpload({
   
   return (
     <div className="relative inline-block">
-      <Avatar className={cn(sizeClasses[size], "relative")}>
-        <AvatarImage src={avatarUrl || undefined} alt={userName || userEmail} />
-        <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white">
+      <Avatar className={cn(sizeClasses[size], "relative border border-gray-200 dark:border-gray-700")}>
+        <AvatarImage 
+          src={avatarUrl || undefined} 
+          alt={userName || userEmail}
+          className="object-cover" 
+        />
+        <AvatarFallback className="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-medium text-sm">
           {getInitials()}
         </AvatarFallback>
       </Avatar>
@@ -138,18 +142,31 @@ export function AvatarUpload({
             onClick={() => fileInputRef.current?.click()}
             disabled={isUploading}
             className={cn(
-              "absolute bottom-0 right-0 rounded-full bg-white dark:bg-gray-800 p-1.5 shadow-lg",
+              "absolute shadow-lg",
+              "bg-white dark:bg-gray-800 rounded-full",
               "border border-gray-200 dark:border-gray-700",
-              "hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors",
+              "hover:bg-gray-50 dark:hover:bg-gray-700 transition-all",
               "disabled:opacity-50 disabled:cursor-not-allowed",
-              size === "sm" && "p-1"
+              size === "sm" && "p-0.5 -bottom-0.5 -right-0.5",
+              size === "md" && "p-1 -bottom-1 -right-1",
+              size === "lg" && "p-1.5 -bottom-1 -right-1"
             )}
             title="Change avatar"
           >
             {isUploading ? (
-              <div className="animate-spin h-3 w-3 border-2 border-gray-500 border-t-transparent rounded-full" />
+              <div className={cn(
+                "animate-spin border-2 border-gray-500 border-t-transparent rounded-full",
+                size === "sm" && "h-3 w-3",
+                size === "md" && "h-3.5 w-3.5",
+                size === "lg" && "h-4 w-4"
+              )} />
             ) : (
-              <Camera className={cn("text-gray-600 dark:text-gray-400", size === "sm" ? "h-3 w-3" : "h-4 w-4")} />
+              <Camera className={cn(
+                "text-gray-600 dark:text-gray-400",
+                size === "sm" && "h-3 w-3",
+                size === "md" && "h-3.5 w-3.5",
+                size === "lg" && "h-4 w-4"
+              )} />
             )}
           </button>
           
@@ -158,13 +175,22 @@ export function AvatarUpload({
               onClick={handleRemoveAvatar}
               disabled={isUploading}
               className={cn(
-                "absolute -top-1 -right-1 rounded-full bg-red-500 p-1 shadow-lg",
-                "hover:bg-red-600 transition-colors",
-                "disabled:opacity-50 disabled:cursor-not-allowed"
+                "absolute rounded-full bg-red-500 shadow-lg",
+                "hover:bg-red-600 transition-all",
+                "disabled:opacity-50 disabled:cursor-not-allowed",
+                "border border-white dark:border-gray-900",
+                size === "sm" && "p-0.5 -top-1 -right-1",
+                size === "md" && "p-0.5 -top-1.5 -right-1.5",
+                size === "lg" && "p-1 -top-2 -right-2"
               )}
               title="Remove avatar"
             >
-              <X className="h-3 w-3 text-white" />
+              <X className={cn(
+                "text-white",
+                size === "sm" && "h-2.5 w-2.5",
+                size === "md" && "h-3 w-3",
+                size === "lg" && "h-3.5 w-3.5"
+              )} />
             </button>
           )}
           

From 1a201f7e72f7b62a3e3baaa0f1fc79565cb14f32 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Sun, 24 Aug 2025 21:36:10 +0530
Subject: [PATCH 33/43] add notificaiton click

---
 .../page/[pageId]/PageEditorV2.tsx            |   1 +
 app/api/notifications/route.ts                | 188 +++++++++++
 .../[workspaceId]/members/search/route.ts     |  79 +++++
 components/editor/BlockV2.tsx                 |  73 ++++-
 components/editor/ContentEditableV2.tsx       |  26 +-
 components/editor/MentionAutocomplete.tsx     | 155 ++++++++++
 components/editor/NotionEditor.tsx            |  95 +++++-
 components/editor/blocks/TextBlock.tsx        |   4 +
 components/inbox/NotificationInbox.tsx        | 291 ++++++++++++++++++
 components/layout/notion-sidebar.tsx          | 141 ++++++++-
 components/page/notion-page-header.tsx        |  61 +++-
 .../migration.sql                             |  44 +++
 prisma/schema.prisma                          |  46 +++
 13 files changed, 1193 insertions(+), 11 deletions(-)
 create mode 100644 app/api/notifications/route.ts
 create mode 100644 app/api/workspaces/[workspaceId]/members/search/route.ts
 create mode 100644 components/editor/MentionAutocomplete.tsx
 create mode 100644 components/inbox/NotificationInbox.tsx
 create mode 100644 prisma/migrations/20250824144737_add_notifications/migration.sql

diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
index 7ef1de3..a6edfdf 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
@@ -323,6 +323,7 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
           <div className="mt-2">
             <NotionEditor
               pageId={page.id}
+              workspaceId={page.workspaceId}
               initialBlocks={initialBlocks}
               onAutoSave={handleAutoSave}
               showSaveStatus={false}
diff --git a/app/api/notifications/route.ts b/app/api/notifications/route.ts
new file mode 100644
index 0000000..4e8f064
--- /dev/null
+++ b/app/api/notifications/route.ts
@@ -0,0 +1,188 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getCurrentUser } from '@/lib/auth'
+import { prisma } from '@/lib/db/prisma'
+
+// GET /api/notifications - Get user's notifications
+export async function GET(request: NextRequest) {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const searchParams = request.nextUrl.searchParams
+    const unreadOnly = searchParams.get('unread') === 'true'
+    const limit = parseInt(searchParams.get('limit') || '20')
+    const offset = parseInt(searchParams.get('offset') || '0')
+
+    const where = {
+      recipientId: user.id,
+      ...(unreadOnly && { read: false })
+    }
+
+    const [notifications, total, unreadCount] = await Promise.all([
+      prisma.notification.findMany({
+        where,
+        include: {
+          mentionedBy: {
+            select: {
+              id: true,
+              name: true,
+              email: true,
+              avatarUrl: true
+            }
+          },
+          page: {
+            select: {
+              id: true,
+              title: true,
+              icon: true
+            }
+          },
+          workspace: {
+            select: {
+              id: true,
+              name: true,
+              slug: true
+            }
+          }
+        },
+        orderBy: {
+          createdAt: 'desc'
+        },
+        take: limit,
+        skip: offset
+      }),
+      prisma.notification.count({ where }),
+      prisma.notification.count({
+        where: {
+          recipientId: user.id,
+          read: false
+        }
+      })
+    ])
+
+    return NextResponse.json({
+      notifications,
+      total,
+      unreadCount
+    })
+  } catch (error) {
+    console.error('Error fetching notifications:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
+
+// POST /api/notifications - Create a new notification
+export async function POST(request: NextRequest) {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const { type, recipientId, title, message, pageId, workspaceId, metadata } = body
+
+    // Don't create notification for self-mentions
+    if (recipientId === user.id) {
+      return NextResponse.json({ success: true })
+    }
+
+    const notification = await prisma.notification.create({
+      data: {
+        type,
+        title,
+        message,
+        recipientId,
+        mentionedById: user.id,
+        pageId,
+        workspaceId,
+        metadata
+      },
+      include: {
+        mentionedBy: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            avatarUrl: true
+          }
+        },
+        page: {
+          select: {
+            id: true,
+            title: true,
+            icon: true
+          }
+        },
+        workspace: {
+          select: {
+            id: true,
+            name: true,
+            slug: true
+          }
+        }
+      }
+    })
+
+    // TODO: Send real-time notification via WebSocket
+    // io.to(`user:${recipientId}`).emit('notification', notification)
+
+    return NextResponse.json(notification)
+  } catch (error) {
+    console.error('Error creating notification:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
+
+// PATCH /api/notifications - Mark notifications as read
+export async function PATCH(request: NextRequest) {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const { notificationIds, markAllRead } = body
+
+    if (markAllRead) {
+      await prisma.notification.updateMany({
+        where: {
+          recipientId: user.id,
+          read: false
+        },
+        data: {
+          read: true
+        }
+      })
+    } else if (notificationIds && Array.isArray(notificationIds)) {
+      await prisma.notification.updateMany({
+        where: {
+          id: {
+            in: notificationIds
+          },
+          recipientId: user.id
+        },
+        data: {
+          read: true
+        }
+      })
+    }
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error updating notifications:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/api/workspaces/[workspaceId]/members/search/route.ts b/app/api/workspaces/[workspaceId]/members/search/route.ts
new file mode 100644
index 0000000..3686711
--- /dev/null
+++ b/app/api/workspaces/[workspaceId]/members/search/route.ts
@@ -0,0 +1,79 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getCurrentUser } from '@/lib/auth'
+import { prisma } from '@/lib/db/prisma'
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ workspaceId: string }> }
+) {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { workspaceId } = await params
+    const searchParams = request.nextUrl.searchParams
+    const search = searchParams.get('search') || ''
+
+    // Check if user is a member of the workspace
+    const membership = await prisma.workspaceMember.findUnique({
+      where: {
+        userId_workspaceId: {
+          userId: user.id,
+          workspaceId
+        }
+      }
+    })
+
+    if (!membership) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    // Fetch workspace members with search
+    const members = await prisma.workspaceMember.findMany({
+      where: {
+        workspaceId,
+        OR: search ? [
+          {
+            user: {
+              name: {
+                contains: search,
+                mode: 'insensitive'
+              }
+            }
+          },
+          {
+            user: {
+              email: {
+                contains: search,
+                mode: 'insensitive'
+              }
+            }
+          }
+        ] : undefined
+      },
+      include: {
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            avatarUrl: true
+          }
+        }
+      },
+      take: 10
+    })
+
+    return NextResponse.json({
+      members: members.map(m => m.user)
+    })
+  } catch (error) {
+    console.error('Error fetching workspace members:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/components/editor/BlockV2.tsx b/components/editor/BlockV2.tsx
index 10852da..92df53a 100644
--- a/components/editor/BlockV2.tsx
+++ b/components/editor/BlockV2.tsx
@@ -25,11 +25,13 @@ interface BlockV2Props {
   onDelete?: (blockId: string) => void
   onAddBlock?: (type: BlockTypeEnum, afterBlockId?: string) => string
   onSlashCommand?: (blockId: string, position: { top: number, left: number }) => void
+  onMentionCommand?: (blockId: string, position: { top: number, left: number }, searchQuery: string) => void
   onFocus?: (blockId: string) => void
   onBlur?: (blockId: string) => void
   readOnly?: boolean
   isSelected?: boolean
   userPresence?: { userId: string; userName: string; userColor: string }
+  workspaceId?: string
 }
 
 export default function BlockV2({
@@ -38,11 +40,13 @@ export default function BlockV2({
   onDelete,
   onAddBlock,
   onSlashCommand,
+  onMentionCommand,
   onFocus,
   onBlur,
   readOnly = false,
   isSelected = false,
-  userPresence
+  userPresence,
+  workspaceId
 }: BlockV2Props) {
   const [isHovered, setIsHovered] = useState(false)
   const [isFocused, setIsFocused] = useState(false)
@@ -69,8 +73,71 @@ export default function BlockV2({
 
   const showHandle = !readOnly && (isHovered || isFocused || isSelected)
 
-  // Handle content changes and slash commands
+  // Handle content changes, slash commands, and @mentions
   const handleContentChange = useCallback((content: string) => {
+    // Update mention indices if content has changed
+    if (block.properties?.mentions && block.properties.mentions.length > 0) {
+      // Recalculate mention positions based on the new content
+      const updatedMentions = block.properties.mentions.map(mention => {
+        // Find the mention text in the new content
+        const mentionText = `@${mention.userName}`
+        const newIndex = content.indexOf(mentionText)
+        
+        if (newIndex !== -1) {
+          return {
+            ...mention,
+            startIndex: newIndex,
+            endIndex: newIndex + mentionText.length
+          }
+        }
+        return mention // Keep original if not found
+      }).filter(m => content.includes(`@${m.userName}`)) // Remove mentions that no longer exist
+      
+      // Update block properties with recalculated mentions
+      if (updatedMentions.length !== block.properties.mentions.length || 
+          JSON.stringify(updatedMentions) !== JSON.stringify(block.properties.mentions)) {
+        onUpdate?.(block.id, { 
+          content,
+          properties: {
+            ...block.properties,
+            mentions: updatedMentions
+          }
+        })
+        return
+      }
+    }
+    
+    // Check for @mention
+    const atIndex = content.lastIndexOf('@')
+    if (atIndex !== -1 && onMentionCommand) {
+      const beforeAt = content.substring(0, atIndex)
+      const afterAt = content.substring(atIndex + 1)
+      
+      // Check if @ is at the start or preceded by a space
+      if (atIndex === 0 || beforeAt[beforeAt.length - 1] === ' ') {
+        // Get the search query (text after @)
+        const searchMatch = afterAt.match(/^([\w\s]*)/)
+        const searchQuery = searchMatch ? searchMatch[1] : ''
+        
+        // Get cursor position for menu
+        const selection = window.getSelection()
+        if (selection?.rangeCount && selection.rangeCount > 0) {
+          const range = selection.getRangeAt(0)
+          const rect = range.getBoundingClientRect()
+          onMentionCommand(block.id, {
+            top: rect.bottom + window.scrollY + 8,
+            left: rect.left + window.scrollX
+          }, searchQuery)
+        } else if (contentRef.current) {
+          const rect = contentRef.current.getBoundingClientRect()
+          onMentionCommand(block.id, {
+            top: rect.bottom + window.scrollY + 8,
+            left: rect.left + window.scrollX
+          }, searchQuery)
+        }
+      }
+    }
+    
     // Check for slash command
     if (content.endsWith('/') && onSlashCommand) {
       const selection = window.getSelection()
@@ -94,7 +161,7 @@ export default function BlockV2({
     }
     
     onUpdate?.(block.id, { content })
-  }, [block.id, onUpdate, onSlashCommand])
+  }, [block.id, block.properties, onUpdate, onSlashCommand, onMentionCommand])
 
   // Handle property updates (for specialized blocks)
   const handlePropertyUpdate = useCallback((properties: any) => {
diff --git a/components/editor/ContentEditableV2.tsx b/components/editor/ContentEditableV2.tsx
index 18f1fcf..8e5a6d0 100644
--- a/components/editor/ContentEditableV2.tsx
+++ b/components/editor/ContentEditableV2.tsx
@@ -13,6 +13,7 @@ interface ContentEditableProps {
   placeholder?: string
   readOnly?: boolean
   allowFormatting?: boolean
+  mentions?: Array<{ userId: string; userName: string; startIndex: number; endIndex: number }>
 }
 
 export default function ContentEditableV2({
@@ -24,22 +25,37 @@ export default function ContentEditableV2({
   className,
   placeholder,
   readOnly = false,
-  allowFormatting = false
+  allowFormatting = false,
+  mentions = []
 }: ContentEditableProps) {
   const ref = useRef<HTMLDivElement>(null)
   const lastKnownContent = useRef(content)
   const isComposing = useRef(false)
 
-  // Convert content to HTML for display
+  // Convert content to HTML for display with mention highlighting
   const contentToHtml = (text: string): string => {
     if (!text) return ''
     
     // Escape HTML entities
-    const escaped = text
+    let escaped = text
       .replace(/&/g, '&amp;')
       .replace(/</g, '&lt;')
       .replace(/>/g, '&gt;')
     
+    // Apply mention highlighting
+    if (mentions && mentions.length > 0) {
+      // Sort mentions by start index in reverse to avoid index shifting
+      const sortedMentions = [...mentions].sort((a, b) => b.startIndex - a.startIndex)
+      
+      for (const mention of sortedMentions) {
+        const before = escaped.substring(0, mention.startIndex)
+        const mentionText = escaped.substring(mention.startIndex, mention.endIndex)
+        const after = escaped.substring(mention.endIndex)
+        
+        escaped = `${before}<span class="mention" data-user-id="${mention.userId}" style="color: #0969da; background-color: rgba(9, 105, 218, 0.1); padding: 0 2px; border-radius: 3px; cursor: pointer;">${mentionText}</span>${after}`
+      }
+    }
+    
     // Convert newlines to <br> tags
     return escaped.replace(/\n/g, '<br>')
   }
@@ -47,7 +63,7 @@ export default function ContentEditableV2({
   // Convert HTML back to plain text
   const htmlToContent = (html: string): string => {
     // If empty or just whitespace/br tags, return empty
-    const stripped = html.replace(/<br\s*\/?>/gi, '').trim()
+    const stripped = html.replace(/<br\s*\/?>/gi, '').replace(/<span[^>]*>|<\/span>/gi, '').trim()
     if (!stripped || stripped === '&nbsp;') {
       return ''
     }
@@ -87,7 +103,7 @@ export default function ContentEditableV2({
       ref.current.innerHTML = newHtml
       lastKnownContent.current = content
     }
-  }, [content, contentToHtml])
+  }, [content, contentToHtml, mentions])
 
   // Handle input changes
   const handleInput = useCallback(() => {
diff --git a/components/editor/MentionAutocomplete.tsx b/components/editor/MentionAutocomplete.tsx
new file mode 100644
index 0000000..898d6c7
--- /dev/null
+++ b/components/editor/MentionAutocomplete.tsx
@@ -0,0 +1,155 @@
+'use client'
+
+import React, { useState, useEffect, useRef } from 'react'
+import { User } from '@prisma/client'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Loader2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface MentionAutocompleteProps {
+  isOpen: boolean
+  position: { top: number; left: number }
+  searchQuery: string
+  workspaceId: string
+  onSelect: (user: User) => void
+  onClose: () => void
+}
+
+export default function MentionAutocomplete({
+  isOpen,
+  position,
+  searchQuery,
+  workspaceId,
+  onSelect,
+  onClose
+}: MentionAutocompleteProps) {
+  const [users, setUsers] = useState<User[]>([])
+  const [loading, setLoading] = useState(false)
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  // Fetch workspace members when search query changes
+  useEffect(() => {
+    if (!isOpen || !searchQuery) {
+      setUsers([])
+      return
+    }
+
+    const fetchUsers = async () => {
+      setLoading(true)
+      try {
+        const response = await fetch(`/api/workspaces/${workspaceId}/members/search?search=${searchQuery}`)
+        if (response.ok) {
+          const data = await response.json()
+          setUsers(data.members || [])
+        }
+      } catch (error) {
+        console.error('Error fetching users:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    const debounceTimer = setTimeout(fetchUsers, 200)
+    return () => clearTimeout(debounceTimer)
+  }, [searchQuery, workspaceId, isOpen])
+
+  // Handle keyboard navigation
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault()
+          setSelectedIndex(prev => (prev + 1) % users.length)
+          break
+        case 'ArrowUp':
+          e.preventDefault()
+          setSelectedIndex(prev => (prev - 1 + users.length) % users.length)
+          break
+        case 'Enter':
+          e.preventDefault()
+          if (users[selectedIndex]) {
+            onSelect(users[selectedIndex])
+          }
+          break
+        case 'Escape':
+          e.preventDefault()
+          onClose()
+          break
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, users, selectedIndex, onSelect, onClose])
+
+  // Reset selected index when users change
+  useEffect(() => {
+    setSelectedIndex(0)
+  }, [users])
+
+  if (!isOpen) return null
+
+  const getInitials = (name?: string | null, email?: string) => {
+    if (name) {
+      return name
+        .split(' ')
+        .map(n => n[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2)
+    }
+    return email?.[0]?.toUpperCase() || '?'
+  }
+
+  return (
+    <div
+      ref={menuRef}
+      className="absolute z-50 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 max-h-64 overflow-y-auto"
+      style={{
+        top: position.top,
+        left: position.left
+      }}
+    >
+      {loading ? (
+        <div className="flex items-center justify-center py-4">
+          <Loader2 className="h-4 w-4 animate-spin text-gray-500" />
+        </div>
+      ) : users.length > 0 ? (
+        <div className="py-1">
+          {users.map((user, index) => (
+            <button
+              key={user.id}
+              onClick={() => onSelect(user)}
+              className={cn(
+                "w-full px-3 py-2 flex items-center gap-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+                selectedIndex === index && "bg-gray-100 dark:bg-gray-700"
+              )}
+            >
+              <Avatar className="h-6 w-6">
+                <AvatarImage src={user.avatarUrl || undefined} />
+                <AvatarFallback className="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 text-xs">
+                  {getInitials(user.name, user.email)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1 text-left">
+                <div className="text-sm font-medium text-gray-900 dark:text-white">
+                  {user.name || 'Unknown'}
+                </div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">
+                  {user.email}
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      ) : (
+        <div className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+          No users found
+        </div>
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/components/editor/NotionEditor.tsx b/components/editor/NotionEditor.tsx
index 093165c..4e6f5fb 100644
--- a/components/editor/NotionEditor.tsx
+++ b/components/editor/NotionEditor.tsx
@@ -6,15 +6,18 @@ import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-ki
 import { Block as BlockType, EditorState, EditorAction, ListProperties, ListItem } from '@/types'
 import BlockV2 from './BlockV2'
 import SlashMenu from './SlashMenu'
+import MentionAutocomplete from './MentionAutocomplete'
 import { generateId } from '@/lib/utils/id'
 import { pageContentService } from '@/lib/services/page-content'
 import { Save, Clock, AlertCircle } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import toast from 'react-hot-toast'
 import { useSocket } from '@/lib/socket/client'
+import { User } from '@prisma/client'
 
 interface NotionEditorProps {
   pageId: string
+  workspaceId?: string
   initialBlocks?: BlockType[]
   onSave?: (blocks: BlockType[]) => void
   onAutoSave?: (blocks: BlockType[]) => Promise<void>
@@ -75,7 +78,8 @@ function editorReducer(state: EditorState, action: EditorAction): EditorState {
 type SaveStatus = 'saved' | 'saving' | 'error' | 'unsaved'
 
 export default function NotionEditor({ 
-  pageId, 
+  pageId,
+  workspaceId, 
   initialBlocks = [], 
   onSave,
   onAutoSave,
@@ -111,6 +115,10 @@ export default function NotionEditor({
   
   const [showSlashMenu, setShowSlashMenu] = useState(false)
   const [slashMenuPosition, setSlashMenuPosition] = useState({ top: 0, left: 0 })
+  const [showMentionMenu, setShowMentionMenu] = useState(false)
+  const [mentionMenuPosition, setMentionMenuPosition] = useState({ top: 0, left: 0 })
+  const [mentionSearchQuery, setMentionSearchQuery] = useState('')
+  const [currentMentionBlockId, setCurrentMentionBlockId] = useState<string | null>(null)
   const [saveStatus, setSaveStatus] = useState<SaveStatus>('saved')
   const [draggedBlock, setDraggedBlock] = useState<BlockType | null>(null)
   const [blockUsers, setBlockUsers] = useState<Map<string, { userId: string; userName: string; userColor: string }>>(new Map())
@@ -592,6 +600,74 @@ export default function NotionEditor({
     setSlashMenuPosition(position)
     setShowSlashMenu(true)
   }, [])
+  
+  const handleMentionCommand = useCallback((blockId: string, position: { top: number, left: number }, searchQuery: string) => {
+    setCurrentMentionBlockId(blockId)
+    setMentionMenuPosition(position)
+    setMentionSearchQuery(searchQuery)
+    setShowMentionMenu(true)
+  }, [])
+  
+  const handleMentionSelect = useCallback(async (user: User) => {
+    if (!currentMentionBlockId) return
+    
+    // Get the current block
+    const block = blocks.find(b => b.id === currentMentionBlockId)
+    if (!block) return
+    
+    // Replace @query with @username
+    let content = typeof block.content === 'string' ? block.content : ''
+    const atIndex = content.lastIndexOf('@')
+    if (atIndex !== -1) {
+      const beforeAt = content.substring(0, atIndex)
+      const mentionText = `@${user.name || user.email}`
+      content = `${beforeAt}${mentionText} `
+      
+      // Store mention metadata in block properties
+      const existingMentions = block.properties?.mentions || []
+      const newMention = {
+        userId: user.id,
+        userName: user.name || user.email || '',
+        startIndex: atIndex,
+        endIndex: atIndex + mentionText.length
+      }
+      
+      // Update block with content and mention metadata
+      updateBlock(currentMentionBlockId, { 
+        content,
+        properties: {
+          ...block.properties,
+          mentions: [...existingMentions, newMention]
+        }
+      })
+    }
+    
+    // Send notification to the mentioned user
+    if (workspaceId) {
+      try {
+        await fetch('/api/notifications', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            type: 'MENTION',
+            recipientId: user.id,
+            title: `You were mentioned`,
+            message: `You were mentioned in a page`,
+            pageId,
+            workspaceId,
+            metadata: { blockId: currentMentionBlockId }
+          })
+        })
+      } catch (error) {
+        console.error('Error sending mention notification:', error)
+      }
+    }
+    
+    // Close mention menu
+    setShowMentionMenu(false)
+    setCurrentMentionBlockId(null)
+    setMentionSearchQuery('')
+  }, [currentMentionBlockId, blocks, updateBlock, pageId, workspaceId])
 
   const handleSlashMenuSelect = useCallback((type: BlockType['type']) => {
     if (editorState.selectedBlockId) {
@@ -722,6 +798,7 @@ export default function NotionEditor({
                 onDelete={deleteBlock}
                 onAddBlock={(type, afterBlockId) => addBlock(type, undefined, afterBlockId)}
                 onSlashCommand={handleSlashCommand}
+                onMentionCommand={handleMentionCommand}
                 onFocus={(blockId) => {
                   dispatch({ type: 'SELECT_BLOCK', payload: blockId })
                   // Send focus event to other users
@@ -738,6 +815,7 @@ export default function NotionEditor({
                 readOnly={readOnly}
                 isSelected={block.id === editorState.selectedBlockId}
                 userPresence={blockUsers.get(block.id)}
+                workspaceId={workspaceId}
               />
             ))}
           </SortableContext>
@@ -779,6 +857,21 @@ export default function NotionEditor({
           />
         )}
         
+        {showMentionMenu && workspaceId && (
+          <MentionAutocomplete
+            isOpen={showMentionMenu}
+            position={mentionMenuPosition}
+            searchQuery={mentionSearchQuery}
+            workspaceId={workspaceId}
+            onSelect={handleMentionSelect}
+            onClose={() => {
+              setShowMentionMenu(false)
+              setCurrentMentionBlockId(null)
+              setMentionSearchQuery('')
+            }}
+          />
+        )}
+        
         {editorState.isLoading && (
           <div className="flex items-center justify-center p-8">
             <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
diff --git a/components/editor/blocks/TextBlock.tsx b/components/editor/blocks/TextBlock.tsx
index 7205ff2..357cf38 100644
--- a/components/editor/blocks/TextBlock.tsx
+++ b/components/editor/blocks/TextBlock.tsx
@@ -32,6 +32,9 @@ export default function TextBlock({
       ? block.content.map(rt => rt.text).join('')
       : ''
 
+  // Extract mentions from block properties
+  const mentions = block.properties?.mentions || []
+
   return (
     <ContentEditableV2
       content={content}
@@ -43,6 +46,7 @@ export default function TextBlock({
       placeholder={placeholder}
       readOnly={readOnly}
       allowFormatting={true}
+      mentions={mentions}
     />
   )
 }
\ No newline at end of file
diff --git a/components/inbox/NotificationInbox.tsx b/components/inbox/NotificationInbox.tsx
new file mode 100644
index 0000000..6371881
--- /dev/null
+++ b/components/inbox/NotificationInbox.tsx
@@ -0,0 +1,291 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { Bell, Check, CheckCheck, File, MessageSquare, Share2, UserPlus, AtSign } from 'lucide-react'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { formatDistanceToNow } from 'date-fns'
+import Link from 'next/link'
+import toast from 'react-hot-toast'
+
+interface Notification {
+  id: string
+  type: 'MENTION' | 'PAGE_SHARED' | 'COMMENT_REPLY' | 'PAGE_UPDATED' | 'WORKSPACE_INVITE'
+  title: string
+  message: string
+  read: boolean
+  createdAt: string
+  mentionedBy?: {
+    id: string
+    name: string | null
+    email: string
+    avatarUrl: string | null
+  }
+  page?: {
+    id: string
+    title: string
+    icon: string | null
+  }
+  workspace?: {
+    id: string
+    name: string
+    slug: string
+  }
+  metadata?: any
+}
+
+interface NotificationInboxProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function NotificationInbox({ isOpen, onClose }: NotificationInboxProps) {
+  const [notifications, setNotifications] = useState<Notification[]>([])
+  const [loading, setLoading] = useState(true)
+  const [unreadCount, setUnreadCount] = useState(0)
+  const [filter, setFilter] = useState<'all' | 'unread'>('all')
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchNotifications()
+    }
+  }, [isOpen, filter])
+
+  const fetchNotifications = async () => {
+    setLoading(true)
+    try {
+      const params = new URLSearchParams()
+      if (filter === 'unread') {
+        params.append('unread', 'true')
+      }
+      
+      const response = await fetch(`/api/notifications?${params}`)
+      if (response.ok) {
+        const data = await response.json()
+        setNotifications(data.notifications)
+        setUnreadCount(data.unreadCount)
+      }
+    } catch (error) {
+      console.error('Error fetching notifications:', error)
+      toast.error('Failed to load notifications')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const markAsRead = async (notificationIds: string[]) => {
+    try {
+      const response = await fetch('/api/notifications', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ notificationIds })
+      })
+      
+      if (response.ok) {
+        setNotifications(prev =>
+          prev.map(n => 
+            notificationIds.includes(n.id) ? { ...n, read: true } : n
+          )
+        )
+        setUnreadCount(prev => Math.max(0, prev - notificationIds.length))
+      }
+    } catch (error) {
+      console.error('Error marking notifications as read:', error)
+    }
+  }
+
+  const markAllAsRead = async () => {
+    try {
+      const response = await fetch('/api/notifications', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ markAllRead: true })
+      })
+      
+      if (response.ok) {
+        setNotifications(prev => prev.map(n => ({ ...n, read: true })))
+        setUnreadCount(0)
+        toast.success('All notifications marked as read')
+      }
+    } catch (error) {
+      console.error('Error marking all as read:', error)
+      toast.error('Failed to mark notifications as read')
+    }
+  }
+
+  const getNotificationIcon = (type: Notification['type']) => {
+    switch (type) {
+      case 'MENTION':
+        return <AtSign className="h-4 w-4" />
+      case 'PAGE_SHARED':
+        return <Share2 className="h-4 w-4" />
+      case 'COMMENT_REPLY':
+        return <MessageSquare className="h-4 w-4" />
+      case 'PAGE_UPDATED':
+        return <File className="h-4 w-4" />
+      case 'WORKSPACE_INVITE':
+        return <UserPlus className="h-4 w-4" />
+      default:
+        return <Bell className="h-4 w-4" />
+    }
+  }
+
+  const getInitials = (name?: string | null, email?: string) => {
+    if (name) {
+      return name
+        .split(' ')
+        .map(n => n[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2)
+    }
+    return email?.[0]?.toUpperCase() || '?'
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4">
+      <div className="fixed inset-0 bg-black/20" onClick={onClose} />
+      
+      <div className="relative w-full max-w-2xl bg-white dark:bg-gray-900 rounded-lg shadow-xl max-h-[70vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
+          <div className="flex items-center gap-3">
+            <Bell className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+            <h2 className="text-lg font-semibold">Notifications</h2>
+            {unreadCount > 0 && (
+              <span className="px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full">
+                {unreadCount} unread
+              </span>
+            )}
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <div className="flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
+              <button
+                onClick={() => setFilter('all')}
+                className={cn(
+                  "px-3 py-1 text-sm font-medium rounded transition-colors",
+                  filter === 'all'
+                    ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm"
+                    : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                )}
+              >
+                All
+              </button>
+              <button
+                onClick={() => setFilter('unread')}
+                className={cn(
+                  "px-3 py-1 text-sm font-medium rounded transition-colors",
+                  filter === 'unread'
+                    ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm"
+                    : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                )}
+              >
+                Unread
+              </button>
+            </div>
+            
+            {unreadCount > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={markAllAsRead}
+                className="text-xs"
+              >
+                <CheckCheck className="h-3.5 w-3.5 mr-1" />
+                Mark all read
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Notifications List */}
+        <div className="flex-1 overflow-y-auto">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+            </div>
+          ) : notifications.length > 0 ? (
+            <div className="divide-y divide-gray-200 dark:divide-gray-800">
+              {notifications.map(notification => (
+                <div
+                  key={notification.id}
+                  className={cn(
+                    "px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors cursor-pointer",
+                    !notification.read && "bg-blue-50/50 dark:bg-blue-900/10"
+                  )}
+                  onClick={() => {
+                    if (!notification.read) {
+                      markAsRead([notification.id])
+                    }
+                    if (notification.page && notification.workspace) {
+                      window.location.href = `/workspace/${notification.workspace.id}/page/${notification.page.id}`
+                    }
+                  }}
+                >
+                  <div className="flex items-start gap-3">
+                    {notification.mentionedBy ? (
+                      <Avatar className="h-8 w-8 flex-shrink-0">
+                        <AvatarImage src={notification.mentionedBy.avatarUrl || undefined} />
+                        <AvatarFallback className="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 text-xs">
+                          {getInitials(notification.mentionedBy.name, notification.mentionedBy.email)}
+                        </AvatarFallback>
+                      </Avatar>
+                    ) : (
+                      <div className="h-8 w-8 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center flex-shrink-0">
+                        {getNotificationIcon(notification.type)}
+                      </div>
+                    )}
+                    
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex-1">
+                          <p className="text-sm font-medium text-gray-900 dark:text-white">
+                            {notification.title}
+                          </p>
+                          <p className="text-sm text-gray-600 dark:text-gray-400 mt-0.5">
+                            {notification.message}
+                          </p>
+                          {notification.page && (
+                            <div className="flex items-center gap-1 mt-1">
+                              {notification.page.icon && (
+                                <span className="text-sm">{notification.page.icon}</span>
+                              )}
+                              <span className="text-xs text-gray-500 dark:text-gray-400">
+                                {notification.page.title}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                        
+                        <div className="flex items-center gap-2 flex-shrink-0">
+                          {!notification.read && (
+                            <div className="h-2 w-2 bg-blue-600 rounded-full" />
+                          )}
+                          <span className="text-xs text-gray-500 dark:text-gray-400">
+                            {formatDistanceToNow(new Date(notification.createdAt), { addSuffix: true })}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="flex flex-col items-center justify-center py-12">
+              <Bell className="h-12 w-12 text-gray-300 dark:text-gray-700 mb-3" />
+              <p className="text-sm text-gray-500 dark:text-gray-400">No notifications yet</p>
+              <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                You'll see mentions and updates here
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index 57135fe..fc30535 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -24,7 +24,9 @@ import {
   Hash,
   Calendar,
   Inbox,
-  File
+  File,
+  Bell,
+  Circle
 } from "lucide-react"
 import {
   DropdownMenu,
@@ -39,8 +41,10 @@ import { CreateWorkspaceModal } from "@/components/workspace/create-workspace-mo
 import { SearchDialog } from "@/components/search/SearchDialog"
 import { SettingsModal } from "@/components/settings/SettingsModal"
 import { AvatarUpload } from "@/components/ui/avatar-upload"
+import { NotificationInbox } from "@/components/inbox/NotificationInbox"
 import { cn } from "@/lib/utils"
 import toast from "react-hot-toast"
+import { formatDistanceToNow } from "date-fns"
 
 interface Workspace {
   id: string
@@ -66,6 +70,9 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
   const [collapsed, setCollapsed] = useState(false)
   const [refreshKey, setRefreshKey] = useState(0)
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const [showNotifications, setShowNotifications] = useState(false)
+  const [notifications, setNotifications] = useState<any[]>([])
+  const [unreadCount, setUnreadCount] = useState(0)
   
   // Keyboard shortcuts
   useEffect(() => {
@@ -160,10 +167,59 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
     return () => clearInterval(interval)
   }, [currentWorkspace, pathname, refreshKey])
 
+  // Fetch notifications
+  useEffect(() => {
+    const fetchNotifications = async () => {
+      try {
+        const response = await fetch('/api/notifications?limit=5')
+        if (response.ok) {
+          const data = await response.json()
+          setNotifications(data.notifications || [])
+          setUnreadCount(data.unreadCount || 0)
+        }
+      } catch (error) {
+        console.error('Error fetching notifications:', error)
+      }
+    }
+    
+    fetchNotifications()
+    // Refresh every 30 seconds
+    const interval = setInterval(fetchNotifications, 30000)
+    return () => clearInterval(interval)
+  }, [])
+
   const handleWorkspaceChange = (workspace: Workspace) => {
     setCurrentWorkspace(workspace)
     router.push(`/workspace/${workspace.id}`)
   }
+  
+  const handleNotificationClick = async (notification: any) => {
+    // Mark as read if unread
+    if (!notification.read) {
+      try {
+        await fetch('/api/notifications', {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ notificationIds: [notification.id] })
+        })
+        
+        // Update local state
+        setNotifications(prev => 
+          prev.map(n => 
+            n.id === notification.id ? { ...n, read: true } : n
+          )
+        )
+        setUnreadCount(prev => Math.max(0, prev - 1))
+      } catch (error) {
+        console.error('Error marking notification as read:', error)
+      }
+    }
+    
+    // Navigate to the page
+    if (notification.page && notification.workspace) {
+      router.push(`/workspace/${notification.workspace.id}/page/${notification.page.id}`)
+    }
+  }
 
   const handleCreatePage = async (parentId?: string) => {
     if (!currentWorkspace || isCreatingPage) return
@@ -322,6 +378,68 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
         <ScrollArea className="flex-1 px-2">
           <div className="space-y-0.5 pb-2">
             <SidebarItem icon={<Inbox />} label="Inbox" onClick={() => {}} />
+            
+            {/* Notifications Section */}
+            <div className="relative">
+              <SidebarItem 
+                icon={<Bell />} 
+                label={
+                  <span className="flex items-center justify-between w-full">
+                    <span>Notifications</span>
+                    {unreadCount > 0 && (
+                      <span className="ml-auto bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full min-w-[18px] text-center">
+                        {unreadCount > 99 ? '99+' : unreadCount}
+                      </span>
+                    )}
+                  </span>
+                }
+                onClick={() => setShowNotifications(true)}
+                active={false}
+              />
+              
+              {/* Recent Notifications Preview */}
+              {notifications.length > 0 && (
+                <div className="ml-6 mt-1 space-y-1">
+                  {notifications.slice(0, 3).map((notification) => (
+                    <button
+                      key={notification.id}
+                      onClick={() => handleNotificationClick(notification)}
+                      className={cn(
+                        "w-full text-left px-2 py-1.5 rounded-sm text-xs transition-colors",
+                        "hover:bg-[#e5e5e4] dark:hover:bg-[#373737]",
+                        !notification.read && "bg-blue-50/50 dark:bg-blue-900/10"
+                      )}
+                    >
+                      <div className="flex items-start gap-2">
+                        {!notification.read && (
+                          <Circle className="h-2 w-2 mt-1 fill-blue-500 text-blue-500" />
+                        )}
+                        <div className="flex-1 min-w-0">
+                          <p className="text-[11px] font-medium truncate">
+                            {notification.title}
+                          </p>
+                          <p className="text-[10px] text-[#787774] dark:text-[#979797] truncate">
+                            {notification.message}
+                          </p>
+                          <p className="text-[10px] text-[#787774] dark:text-[#979797]">
+                            {formatDistanceToNow(new Date(notification.createdAt), { addSuffix: true })}
+                          </p>
+                        </div>
+                      </div>
+                    </button>
+                  ))}
+                  {notifications.length > 3 && (
+                    <button
+                      onClick={() => setShowNotifications(true)}
+                      className="w-full text-left px-2 py-1 text-[10px] text-blue-600 dark:text-blue-400 hover:underline"
+                    >
+                      View all {notifications.length} notifications →
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+            
             <SidebarItem 
               icon={<Trash2 />} 
               label="Trash" 
@@ -418,6 +536,27 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
         user={user}
         workspaceId={currentWorkspace?.id}
       />
+      
+      {/* Notification Inbox Modal */}
+      <NotificationInbox 
+        isOpen={showNotifications} 
+        onClose={() => {
+          setShowNotifications(false)
+          // Refresh notifications after closing
+          setTimeout(async () => {
+            try {
+              const response = await fetch('/api/notifications?limit=5')
+              if (response.ok) {
+                const data = await response.json()
+                setNotifications(data.notifications || [])
+                setUnreadCount(data.unreadCount || 0)
+              }
+            } catch (error) {
+              console.error('Error fetching notifications:', error)
+            }
+          }, 500)
+        }} 
+      />
     </>
   )
 }
diff --git a/components/page/notion-page-header.tsx b/components/page/notion-page-header.tsx
index 886fa4a..3de9541 100644
--- a/components/page/notion-page-header.tsx
+++ b/components/page/notion-page-header.tsx
@@ -33,11 +33,13 @@ import {
   Copy,
   Move,
   Plus,
-  X
+  X,
+  Bell
 } from "lucide-react"
 import toast from "react-hot-toast"
 import { cn } from "@/lib/utils"
 import { ActiveUsers } from "@/components/collaboration/ActiveUsers"
+import { NotificationInbox } from "@/components/inbox/NotificationInbox"
 
 interface NotionPageHeaderProps {
   page: any
@@ -59,8 +61,30 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
   const [hoveredAddIcon, setHoveredAddIcon] = useState(false)
   const [hoveredAddCover, setHoveredAddCover] = useState(false)
   const [isFavorite, setIsFavorite] = useState(page.isFavorite || false)
+  const [showNotifications, setShowNotifications] = useState(false)
+  const [unreadCount, setUnreadCount] = useState(0)
   const [editedTime, setEditedTime] = useState("")
 
+  // Fetch unread notifications count
+  useEffect(() => {
+    const fetchUnreadCount = async () => {
+      try {
+        const response = await fetch('/api/notifications?unread=true')
+        if (response.ok) {
+          const data = await response.json()
+          setUnreadCount(data.unreadCount || 0)
+        }
+      } catch (error) {
+        console.error('Error fetching unread count:', error)
+      }
+    }
+    
+    fetchUnreadCount()
+    // Refresh every 30 seconds
+    const interval = setInterval(fetchUnreadCount, 30000)
+    return () => clearInterval(interval)
+  }, [])
+
   // Format the edited time
   const formatEditedTime = (date: string | Date) => {
     const editDate = new Date(date)
@@ -332,6 +356,21 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
               <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
                 Share
               </button>
+            <button 
+              className="hover:bg-[#37352f0a] px-2 py-1 rounded relative"
+              onClick={() => {
+                console.log('Opening notifications...')
+                setShowNotifications(true)
+              }}
+              title="Notifications"
+            >
+              <Bell className="h-4 w-4" />
+              {unreadCount > 0 && (
+                <span className="absolute -top-0.5 -right-0.5 h-4 w-4 bg-red-500 text-white text-[10px] font-medium rounded-full flex items-center justify-center">
+                  {unreadCount > 9 ? '9+' : unreadCount}
+                </span>
+              )}
+            </button>
             <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
               <MessageSquare className="h-4 w-4" />
             </button>
@@ -444,6 +483,26 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialog>
+
+      {/* Notification Inbox */}
+      <NotificationInbox 
+        isOpen={showNotifications} 
+        onClose={() => {
+          setShowNotifications(false)
+          // Refresh unread count after closing
+          setTimeout(async () => {
+            try {
+              const response = await fetch('/api/notifications?unread=true')
+              if (response.ok) {
+                const data = await response.json()
+                setUnreadCount(data.unreadCount || 0)
+              }
+            } catch (error) {
+              console.error('Error fetching unread count:', error)
+            }
+          }, 500)
+        }} 
+      />
     </>
   )
 }
\ No newline at end of file
diff --git a/prisma/migrations/20250824144737_add_notifications/migration.sql b/prisma/migrations/20250824144737_add_notifications/migration.sql
new file mode 100644
index 0000000..e16f4c4
--- /dev/null
+++ b/prisma/migrations/20250824144737_add_notifications/migration.sql
@@ -0,0 +1,44 @@
+-- CreateEnum
+CREATE TYPE "NotificationType" AS ENUM ('MENTION', 'PAGE_SHARED', 'COMMENT_REPLY', 'PAGE_UPDATED', 'WORKSPACE_INVITE');
+
+-- CreateTable
+CREATE TABLE "Notification" (
+    "id" TEXT NOT NULL,
+    "type" "NotificationType" NOT NULL,
+    "title" TEXT NOT NULL,
+    "message" TEXT NOT NULL,
+    "read" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "recipientId" TEXT NOT NULL,
+    "mentionedById" TEXT,
+    "pageId" TEXT,
+    "workspaceId" TEXT,
+    "metadata" JSONB,
+
+    CONSTRAINT "Notification_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "Notification_recipientId_read_idx" ON "Notification"("recipientId", "read");
+
+-- CreateIndex
+CREATE INDEX "Notification_createdAt_idx" ON "Notification"("createdAt");
+
+-- CreateIndex
+CREATE INDEX "Notification_pageId_idx" ON "Notification"("pageId");
+
+-- CreateIndex
+CREATE INDEX "Notification_workspaceId_idx" ON "Notification"("workspaceId");
+
+-- AddForeignKey
+ALTER TABLE "Notification" ADD CONSTRAINT "Notification_recipientId_fkey" FOREIGN KEY ("recipientId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Notification" ADD CONSTRAINT "Notification_mentionedById_fkey" FOREIGN KEY ("mentionedById") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Notification" ADD CONSTRAINT "Notification_pageId_fkey" FOREIGN KEY ("pageId") REFERENCES "Page"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Notification" ADD CONSTRAINT "Notification_workspaceId_fkey" FOREIGN KEY ("workspaceId") REFERENCES "Workspace"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 5d489de..e58fdbb 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -26,6 +26,8 @@ model User {
   comments      Comment[]
   activities    Activity[]
   permissions   Permission[]
+  notifications Notification[]     @relation("NotificationRecipient")
+  mentions      Notification[]     @relation("NotificationMentionedBy")
   
   @@index([email])
 }
@@ -44,6 +46,7 @@ model Workspace {
   members       WorkspaceMember[]
   pages         Page[]
   databases     Database[]
+  notifications Notification[]
   
   @@index([slug])
 }
@@ -95,6 +98,7 @@ model Page {
   activities    Activity[]
   permissions   Permission[]
   databases     Database[]
+  notifications Notification[]
   
   @@index([workspaceId])
   @@index([authorId])
@@ -220,6 +224,40 @@ model Permission {
   @@index([pageId])
 }
 
+// Notification model
+model Notification {
+  id            String           @id @default(cuid())
+  type          NotificationType
+  title         String
+  message       String
+  read          Boolean          @default(false)
+  createdAt     DateTime         @default(now())
+  updatedAt     DateTime         @updatedAt
+  
+  // The user who receives the notification
+  recipientId   String
+  recipient     User             @relation("NotificationRecipient", fields: [recipientId], references: [id], onDelete: Cascade)
+  
+  // The user who triggered the notification (e.g., mentioned someone)
+  mentionedById String?
+  mentionedBy   User?            @relation("NotificationMentionedBy", fields: [mentionedById], references: [id], onDelete: SetNull)
+  
+  // Related entities
+  pageId        String?
+  page          Page?            @relation(fields: [pageId], references: [id], onDelete: Cascade)
+  
+  workspaceId   String?
+  workspace     Workspace?       @relation(fields: [workspaceId], references: [id], onDelete: Cascade)
+  
+  // Additional metadata (e.g., block ID where mention happened)
+  metadata      Json?
+  
+  @@index([recipientId, read])
+  @@index([createdAt])
+  @@index([pageId])
+  @@index([workspaceId])
+}
+
 // Enums
 enum Role {
   OWNER
@@ -262,4 +300,12 @@ enum PermissionLevel {
   COMMENT
   EDIT
   FULL_ACCESS
+}
+
+enum NotificationType {
+  MENTION
+  PAGE_SHARED
+  COMMENT_REPLY
+  PAGE_UPDATED
+  WORKSPACE_INVITE
 }
\ No newline at end of file

From 744bd6c66df03b7906de6f68b99bedd05e4a68ca Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Mon, 25 Aug 2025 00:07:15 +0530
Subject: [PATCH 34/43] fixed mentiond

---
 app/api/notifications/mention/route.ts        |  87 +++
 app/api/pages/[pageId]/content/route.ts       |  13 +-
 .../workspaces/[workspaceId]/members/route.ts |   2 +-
 components/editor/BlockV2.tsx                 |  95 +---
 components/editor/ContentEditableV2.tsx       |  55 +-
 components/editor/MentionAutocomplete.tsx     |  37 +-
 components/editor/MentionInput.tsx            | 504 ++++++++++++++++++
 components/editor/NotionEditor.tsx            |  95 +---
 components/editor/blocks/HeadingBlock.tsx     |  25 +-
 components/editor/blocks/QuoteBlock.tsx       |  31 +-
 components/editor/blocks/TextBlock.tsx        |  30 +-
 components/layout/notion-sidebar.tsx          | 117 +---
 lib/utils/mentions.ts                         |  88 +++
 13 files changed, 874 insertions(+), 305 deletions(-)
 create mode 100644 app/api/notifications/mention/route.ts
 create mode 100644 components/editor/MentionInput.tsx
 create mode 100644 lib/utils/mentions.ts

diff --git a/app/api/notifications/mention/route.ts b/app/api/notifications/mention/route.ts
new file mode 100644
index 0000000..1a16b7f
--- /dev/null
+++ b/app/api/notifications/mention/route.ts
@@ -0,0 +1,87 @@
+import { NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth'
+import { prisma } from '@/lib/db/prisma'
+
+export async function POST(req: Request) {
+  try {
+    const session = await getServerSession(authOptions)
+    if (!session?.user?.email) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { userId, pageId, workspaceId, message } = await req.json()
+
+    // Get the current user (the one doing the mentioning)
+    const currentUser = await prisma.user.findUnique({
+      where: { email: session.user.email }
+    })
+
+    if (!currentUser) {
+      return NextResponse.json({ error: 'User not found' }, { status: 404 })
+    }
+
+    // Don't send notification to self
+    if (currentUser.id === userId) {
+      return NextResponse.json({ success: true, message: 'Self-mention, no notification sent' })
+    }
+
+    // Get the mentioned user
+    const mentionedUser = await prisma.user.findUnique({
+      where: { id: userId }
+    })
+
+    if (!mentionedUser) {
+      return NextResponse.json({ error: 'Mentioned user not found' }, { status: 404 })
+    }
+
+    // Get the page details
+    const page = await prisma.page.findUnique({
+      where: { id: pageId },
+      select: { title: true }
+    })
+
+    if (!page) {
+      return NextResponse.json({ error: 'Page not found' }, { status: 404 })
+    }
+
+    // Create a notification (you might want to create a Notification model in your schema)
+    // For now, we'll create an activity log entry
+    await prisma.activityLog.create({
+      data: {
+        type: 'MENTION',
+        userId: mentionedUser.id,
+        pageId,
+        workspaceId,
+        metadata: {
+          mentionedBy: currentUser.name || currentUser.email,
+          mentionedById: currentUser.id,
+          pageTitle: page.title,
+          message: `${currentUser.name || currentUser.email} ${message}`
+        }
+      }
+    })
+
+    // In a production app, you might also want to:
+    // 1. Send an email notification
+    // 2. Send a real-time notification via WebSocket/SSE
+    // 3. Add to an in-app notification center
+
+    return NextResponse.json({ 
+      success: true, 
+      message: 'Mention notification sent',
+      notifiedUser: {
+        id: mentionedUser.id,
+        name: mentionedUser.name,
+        email: mentionedUser.email
+      }
+    })
+
+  } catch (error) {
+    console.error('Error sending mention notification:', error)
+    return NextResponse.json(
+      { error: 'Failed to send mention notification' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/api/pages/[pageId]/content/route.ts b/app/api/pages/[pageId]/content/route.ts
index d4438e1..db0c355 100644
--- a/app/api/pages/[pageId]/content/route.ts
+++ b/app/api/pages/[pageId]/content/route.ts
@@ -3,6 +3,7 @@ import { getCurrentUser } from '@/lib/auth'
 import { prisma } from '@/lib/db/prisma'
 import { pageContentService } from '@/lib/services/page-content'
 import { Block } from '@/types'
+import { ensureMentionsPopulated } from '@/lib/utils/mentions'
 
 // GET /api/pages/[pageId]/content - Get page content
 export async function GET(
@@ -50,9 +51,19 @@ export async function GET(
 
     // Get page content from MongoDB
     const pageContent = await pageContentService.loadPageContent(pageId)
+    
+    // Ensure mentions are populated in blocks
+    let processedContent = pageContent
+    if (pageContent && pageContent.blocks && pageContent.blocks.length > 0) {
+      const processedBlocks = await ensureMentionsPopulated(pageContent.blocks)
+      processedContent = {
+        ...pageContent,
+        blocks: processedBlocks
+      }
+    }
 
     return NextResponse.json({
-      pageContent: pageContent || {
+      pageContent: processedContent || {
         pageId,
         blocks: [],
         version: 1,
diff --git a/app/api/workspaces/[workspaceId]/members/route.ts b/app/api/workspaces/[workspaceId]/members/route.ts
index 8be6619..027357a 100644
--- a/app/api/workspaces/[workspaceId]/members/route.ts
+++ b/app/api/workspaces/[workspaceId]/members/route.ts
@@ -61,7 +61,7 @@ export async function GET(
       joinedAt: member.joinedAt
     }))
 
-    return NextResponse.json(formattedMembers)
+    return NextResponse.json({ members: formattedMembers })
   } catch (error) {
     console.error('Error fetching workspace members:', error)
     return NextResponse.json(
diff --git a/components/editor/BlockV2.tsx b/components/editor/BlockV2.tsx
index 92df53a..625ceb4 100644
--- a/components/editor/BlockV2.tsx
+++ b/components/editor/BlockV2.tsx
@@ -25,13 +25,13 @@ interface BlockV2Props {
   onDelete?: (blockId: string) => void
   onAddBlock?: (type: BlockTypeEnum, afterBlockId?: string) => string
   onSlashCommand?: (blockId: string, position: { top: number, left: number }) => void
-  onMentionCommand?: (blockId: string, position: { top: number, left: number }, searchQuery: string) => void
   onFocus?: (blockId: string) => void
   onBlur?: (blockId: string) => void
   readOnly?: boolean
   isSelected?: boolean
   userPresence?: { userId: string; userName: string; userColor: string }
   workspaceId?: string
+  pageId?: string
 }
 
 export default function BlockV2({
@@ -40,13 +40,13 @@ export default function BlockV2({
   onDelete,
   onAddBlock,
   onSlashCommand,
-  onMentionCommand,
   onFocus,
   onBlur,
   readOnly = false,
   isSelected = false,
   userPresence,
-  workspaceId
+  workspaceId,
+  pageId
 }: BlockV2Props) {
   const [isHovered, setIsHovered] = useState(false)
   const [isFocused, setIsFocused] = useState(false)
@@ -73,71 +73,8 @@ export default function BlockV2({
 
   const showHandle = !readOnly && (isHovered || isFocused || isSelected)
 
-  // Handle content changes, slash commands, and @mentions
-  const handleContentChange = useCallback((content: string) => {
-    // Update mention indices if content has changed
-    if (block.properties?.mentions && block.properties.mentions.length > 0) {
-      // Recalculate mention positions based on the new content
-      const updatedMentions = block.properties.mentions.map(mention => {
-        // Find the mention text in the new content
-        const mentionText = `@${mention.userName}`
-        const newIndex = content.indexOf(mentionText)
-        
-        if (newIndex !== -1) {
-          return {
-            ...mention,
-            startIndex: newIndex,
-            endIndex: newIndex + mentionText.length
-          }
-        }
-        return mention // Keep original if not found
-      }).filter(m => content.includes(`@${m.userName}`)) // Remove mentions that no longer exist
-      
-      // Update block properties with recalculated mentions
-      if (updatedMentions.length !== block.properties.mentions.length || 
-          JSON.stringify(updatedMentions) !== JSON.stringify(block.properties.mentions)) {
-        onUpdate?.(block.id, { 
-          content,
-          properties: {
-            ...block.properties,
-            mentions: updatedMentions
-          }
-        })
-        return
-      }
-    }
-    
-    // Check for @mention
-    const atIndex = content.lastIndexOf('@')
-    if (atIndex !== -1 && onMentionCommand) {
-      const beforeAt = content.substring(0, atIndex)
-      const afterAt = content.substring(atIndex + 1)
-      
-      // Check if @ is at the start or preceded by a space
-      if (atIndex === 0 || beforeAt[beforeAt.length - 1] === ' ') {
-        // Get the search query (text after @)
-        const searchMatch = afterAt.match(/^([\w\s]*)/)
-        const searchQuery = searchMatch ? searchMatch[1] : ''
-        
-        // Get cursor position for menu
-        const selection = window.getSelection()
-        if (selection?.rangeCount && selection.rangeCount > 0) {
-          const range = selection.getRangeAt(0)
-          const rect = range.getBoundingClientRect()
-          onMentionCommand(block.id, {
-            top: rect.bottom + window.scrollY + 8,
-            left: rect.left + window.scrollX
-          }, searchQuery)
-        } else if (contentRef.current) {
-          const rect = contentRef.current.getBoundingClientRect()
-          onMentionCommand(block.id, {
-            top: rect.bottom + window.scrollY + 8,
-            left: rect.left + window.scrollX
-          }, searchQuery)
-        }
-      }
-    }
-    
+  // Handle content changes and slash commands
+  const handleContentChange = useCallback((content: string, mentions?: any) => {
     // Check for slash command
     if (content.endsWith('/') && onSlashCommand) {
       const selection = window.getSelection()
@@ -145,13 +82,13 @@ export default function BlockV2({
         const range = selection.getRangeAt(0)
         const rect = range.getBoundingClientRect()
         onSlashCommand(block.id, {
-          top: rect.bottom + window.scrollY + 8,  // Increased spacing
+          top: rect.bottom + window.scrollY + 8,
           left: rect.left + window.scrollX
         })
       } else if (contentRef.current) {
         const rect = contentRef.current.getBoundingClientRect()
         onSlashCommand(block.id, {
-          top: rect.bottom + window.scrollY + 8,  // Increased spacing
+          top: rect.bottom + window.scrollY + 8,
           left: rect.left + window.scrollX
         })
       }
@@ -160,8 +97,16 @@ export default function BlockV2({
       return
     }
     
-    onUpdate?.(block.id, { content })
-  }, [block.id, block.properties, onUpdate, onSlashCommand, onMentionCommand])
+    // Update content and mentions in properties
+    const updates: any = { content }
+    if (mentions && Object.keys(mentions).length > 0) {
+      updates.properties = {
+        ...block.properties,
+        mentions
+      }
+    }
+    onUpdate?.(block.id, updates)
+  }, [block.id, block.properties, onUpdate, onSlashCommand])
 
   // Handle property updates (for specialized blocks)
   const handlePropertyUpdate = useCallback((properties: any) => {
@@ -421,7 +366,7 @@ export default function BlockV2({
       case 'heading1':
       case 'heading2':
       case 'heading3':
-        return <HeadingBlock {...commonProps} />
+        return <HeadingBlock {...commonProps} workspaceId={workspaceId} pageId={pageId} />
       
       case 'bulletList':
       case 'numberedList':
@@ -446,7 +391,7 @@ export default function BlockV2({
         )
       
       case 'quote':
-        return <QuoteBlock {...commonProps} />
+        return <QuoteBlock {...commonProps} workspaceId={workspaceId} pageId={pageId} />
       
       case 'callout':
         return (
@@ -480,7 +425,7 @@ export default function BlockV2({
       
       case 'paragraph':
       default:
-        return <TextBlock {...commonProps} />
+        return <TextBlock {...commonProps} workspaceId={workspaceId} pageId={pageId} />
     }
   }
 
diff --git a/components/editor/ContentEditableV2.tsx b/components/editor/ContentEditableV2.tsx
index 8e5a6d0..7041a63 100644
--- a/components/editor/ContentEditableV2.tsx
+++ b/components/editor/ContentEditableV2.tsx
@@ -13,7 +13,7 @@ interface ContentEditableProps {
   placeholder?: string
   readOnly?: boolean
   allowFormatting?: boolean
-  mentions?: Array<{ userId: string; userName: string; startIndex: number; endIndex: number }>
+  mentions?: Array<{ id?: string; userId: string; userName: string; startIndex: number; endIndex: number }>
 }
 
 export default function ContentEditableV2({
@@ -52,7 +52,10 @@ export default function ContentEditableV2({
         const mentionText = escaped.substring(mention.startIndex, mention.endIndex)
         const after = escaped.substring(mention.endIndex)
         
-        escaped = `${before}<span class="mention" data-user-id="${mention.userId}" style="color: #0969da; background-color: rgba(9, 105, 218, 0.1); padding: 0 2px; border-radius: 3px; cursor: pointer;">${mentionText}</span>${after}`
+        // Use contenteditable="false" to prevent editing within the mention span
+        // Add unique data-mention-id to prevent confusion with multiple same-name mentions
+        const mentionId = mention.id || `${mention.userId}_${mention.startIndex}`
+        escaped = `${before}<span class="mention" data-mention-id="${mentionId}" data-user-id="${mention.userId}" contenteditable="false" style="color: #0969da; background-color: rgba(9, 105, 218, 0.1); padding: 2px 4px; border-radius: 3px; cursor: pointer; font-weight: 500; display: inline-block; user-select: none;">${mentionText}</span>${after}`
       }
     }
     
@@ -63,23 +66,43 @@ export default function ContentEditableV2({
   // Convert HTML back to plain text
   const htmlToContent = (html: string): string => {
     // If empty or just whitespace/br tags, return empty
-    const stripped = html.replace(/<br\s*\/?>/gi, '').replace(/<span[^>]*>|<\/span>/gi, '').trim()
+    const stripped = html.replace(/<br\s*\/?>/gi, '').replace(/<[^>]*>/g, '').trim()
     if (!stripped || stripped === '&nbsp;') {
       return ''
     }
 
-    // Convert br tags to newlines and decode entities
-    return html
-      .replace(/<br\s*\/?>/gi, '\n')
-      .replace(/<div>/gi, '\n')
-      .replace(/<\/div>/gi, '')
-      .replace(/<p>/gi, '')
-      .replace(/<\/p>/gi, '\n')
-      .replace(/<[^>]*>/g, '') // Remove all other tags
-      .replace(/&nbsp;/g, ' ')
-      .replace(/&lt;/g, '<')
-      .replace(/&gt;/g, '>')
-      .replace(/&amp;/g, '&')
+    // Create a temporary div to parse HTML properly
+    const temp = document.createElement('div')
+    temp.innerHTML = html
+    
+    // Get text content, preserving line breaks
+    let text = ''
+    const walk = (node: Node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        text += node.textContent
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const elem = node as HTMLElement
+        if (elem.tagName === 'BR') {
+          text += '\n'
+        } else if (elem.tagName === 'DIV' || elem.tagName === 'P') {
+          if (text && !text.endsWith('\n')) text += '\n'
+          for (const child of Array.from(node.childNodes)) {
+            walk(child)
+          }
+          if (elem.tagName === 'P' && !text.endsWith('\n')) text += '\n'
+        } else {
+          for (const child of Array.from(node.childNodes)) {
+            walk(child)
+          }
+        }
+      }
+    }
+    
+    for (const child of Array.from(temp.childNodes)) {
+      walk(child)
+    }
+    
+    return text.replace(/&nbsp;/g, ' ').trim()
   }
 
   // Update display when content prop changes
@@ -103,7 +126,7 @@ export default function ContentEditableV2({
       ref.current.innerHTML = newHtml
       lastKnownContent.current = content
     }
-  }, [content, contentToHtml, mentions])
+  }, [content, mentions]) // Note: removed contentToHtml from deps as it's defined in component
 
   // Handle input changes
   const handleInput = useCallback(() => {
diff --git a/components/editor/MentionAutocomplete.tsx b/components/editor/MentionAutocomplete.tsx
index 898d6c7..bd0be88 100644
--- a/components/editor/MentionAutocomplete.tsx
+++ b/components/editor/MentionAutocomplete.tsx
@@ -28,9 +28,9 @@ export default function MentionAutocomplete({
   const [selectedIndex, setSelectedIndex] = useState(0)
   const menuRef = useRef<HTMLDivElement>(null)
 
-  // Fetch workspace members when search query changes
+  // Fetch workspace members when menu opens or search query changes
   useEffect(() => {
-    if (!isOpen || !searchQuery) {
+    if (!isOpen) {
       setUsers([])
       return
     }
@@ -38,7 +38,8 @@ export default function MentionAutocomplete({
     const fetchUsers = async () => {
       setLoading(true)
       try {
-        const response = await fetch(`/api/workspaces/${workspaceId}/members/search?search=${searchQuery}`)
+        // Always use the search endpoint, even with empty query to get all users
+        const response = await fetch(`/api/workspaces/${workspaceId}/members/search?search=${searchQuery || ''}`)
         if (response.ok) {
           const data = await response.json()
           setUsers(data.members || [])
@@ -50,8 +51,8 @@ export default function MentionAutocomplete({
       }
     }
 
-    const debounceTimer = setTimeout(fetchUsers, 200)
-    return () => clearTimeout(debounceTimer)
+    // Fetch immediately when menu opens
+    fetchUsers()
   }, [searchQuery, workspaceId, isOpen])
 
   // Handle keyboard navigation
@@ -90,6 +91,20 @@ export default function MentionAutocomplete({
     setSelectedIndex(0)
   }, [users])
 
+  // Handle click outside to close menu
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [isOpen, onClose])
+
   if (!isOpen) return null
 
   const getInitials = (name?: string | null, email?: string) => {
@@ -104,13 +119,19 @@ export default function MentionAutocomplete({
     return email?.[0]?.toUpperCase() || '?'
   }
 
+  // Calculate position to prevent going off-screen
+  const adjustedPosition = {
+    top: position.top,
+    left: Math.min(position.left, window.innerWidth - 280) // Prevent going off right edge
+  }
+
   return (
     <div
       ref={menuRef}
-      className="absolute z-50 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 max-h-64 overflow-y-auto"
+      className="fixed z-50 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-1 max-h-64 overflow-y-auto"
       style={{
-        top: position.top,
-        left: position.left
+        top: adjustedPosition.top,
+        left: adjustedPosition.left
       }}
     >
       {loading ? (
diff --git a/components/editor/MentionInput.tsx b/components/editor/MentionInput.tsx
new file mode 100644
index 0000000..60f4a60
--- /dev/null
+++ b/components/editor/MentionInput.tsx
@@ -0,0 +1,504 @@
+'use client'
+
+import React, { useRef, useState, useEffect, useCallback } from 'react'
+import { cn } from '@/lib/utils'
+import MentionAutocomplete from './MentionAutocomplete'
+import { User } from '@prisma/client'
+
+interface MentionData {
+  [key: string]: {
+    id: string
+    name: string
+    email: string
+  }
+}
+
+interface MentionInputProps {
+  content: string
+  mentions?: MentionData
+  onChange: (content: string, mentions?: MentionData) => void
+  onKeyDown?: (e: React.KeyboardEvent) => void
+  onFocus?: () => void
+  onBlur?: () => void
+  className?: string
+  placeholder?: string
+  readOnly?: boolean
+  workspaceId?: string
+  pageId?: string
+}
+
+interface MentionSearchState {
+  active: boolean
+  startIndex: number
+  searchText: string
+  position: { top: number; left: number }
+}
+
+export default function MentionInput({
+  content,
+  mentions = {},
+  onChange,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  className,
+  placeholder = "Type '/' for commands, '@' to mention",
+  readOnly = false,
+  workspaceId,
+  pageId
+}: MentionInputProps) {
+  const inputRef = useRef<HTMLDivElement>(null)
+  const [localMentions, setLocalMentions] = useState(mentions)
+  const [mentionSearch, setMentionSearch] = useState<MentionSearchState>({
+    active: false,
+    startIndex: -1,
+    searchText: '',
+    position: { top: 0, left: 0 }
+  })
+  const isComposingRef = useRef(false)
+  const lastContentRef = useRef(content)
+  
+  // Update local mentions when prop changes
+  useEffect(() => {
+    setLocalMentions(mentions)
+  }, [mentions])
+  
+  // Fetch missing mention data
+  useEffect(() => {
+    const fetchMissingMentions = async () => {
+      const mentionPattern = /@\[user:([^\]]+)\]/g
+      const userIds: string[] = []
+      let match
+      
+      while ((match = mentionPattern.exec(content)) !== null) {
+        userIds.push(match[1])
+      }
+      
+      if (userIds.length === 0) return
+      
+      const missingUserIds = userIds.filter(id => !localMentions[`user:${id}`])
+      
+      if (missingUserIds.length > 0 && workspaceId) {
+        try {
+          const response = await fetch(`/api/workspaces/${workspaceId}/members`)
+          if (response.ok) {
+            const { members } = await response.json()
+            const newMentions = { ...localMentions }
+            
+            missingUserIds.forEach(userId => {
+              const member = members.find((m: any) => m.id === userId)
+              if (member) {
+                newMentions[`user:${userId}`] = {
+                  id: userId,
+                  name: member.name || member.email,
+                  email: member.email
+                }
+              }
+            })
+            
+            if (Object.keys(newMentions).length > Object.keys(localMentions).length) {
+              setLocalMentions(newMentions)
+            }
+          }
+        } catch (error) {
+          console.error('Error fetching missing mentions:', error)
+        }
+      }
+    }
+    
+    fetchMissingMentions()
+  }, [content, workspaceId, localMentions])
+  
+  // Render content with mentions highlighted
+  const renderContent = useCallback(() => {
+    if (!inputRef.current) return
+    
+    // Save current selection/cursor position
+    const selection = window.getSelection()
+    let savedRange: Range | null = null
+    
+    if (selection && selection.rangeCount > 0) {
+      savedRange = selection.getRangeAt(0).cloneRange()
+    }
+    
+    // Build HTML content
+    let html = ''
+    let lastIndex = 0
+    const mentionPattern = /@\[user:([^\]]+)\]/g
+    let match
+    
+    const escapedContent = content
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+    
+    while ((match = mentionPattern.exec(content)) !== null) {
+      const userId = match[1]
+      const user = localMentions[`user:${userId}`]
+      
+      if (user) {
+        // Add text before mention
+        const textBefore = escapedContent.substring(lastIndex, match.index)
+        html += textBefore.replace(/\n/g, '<br>')
+        
+        // Add mention chip
+        html += `<span class="mention-chip" data-mention-id="${userId}" contenteditable="false" style="color: #0969da; background-color: rgba(9, 105, 218, 0.1); padding: 2px 6px; border-radius: 4px; font-weight: 500; cursor: pointer; display: inline-block; margin: 0 2px; user-select: none;">@${user.name}</span>`
+        
+        lastIndex = match.index + match[0].length
+      }
+    }
+    
+    // Add remaining text
+    const remainingText = escapedContent.substring(lastIndex)
+    html += remainingText.replace(/\n/g, '<br>')
+    
+    // Update innerHTML only if it changed
+    if (inputRef.current.innerHTML !== html) {
+      inputRef.current.innerHTML = html || `<span style="color: #999;">${placeholder}</span>`
+      
+      // Restore cursor position if we had one
+      if (savedRange && selection) {
+        try {
+          selection.removeAllRanges()
+          selection.addRange(savedRange)
+        } catch (e) {
+          // If restoration fails, place cursor at end
+          const range = document.createRange()
+          range.selectNodeContents(inputRef.current)
+          range.collapse(false)
+          selection.removeAllRanges()
+          selection.addRange(range)
+        }
+      }
+    }
+    
+    lastContentRef.current = content
+  }, [content, localMentions, placeholder])
+  
+  // Update display when content or mentions change
+  useEffect(() => {
+    renderContent()
+  }, [renderContent])
+  
+  // Get plain text with placeholders from the contenteditable
+  const getPlainTextWithPlaceholders = useCallback((): string => {
+    if (!inputRef.current) return ''
+    
+    let text = ''
+    
+    const processNode = (node: Node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        text += node.textContent || ''
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node as HTMLElement
+        
+        if (el.classList?.contains('mention-chip')) {
+          const mentionId = el.dataset.mentionId
+          if (mentionId) {
+            text += `@[user:${mentionId}]`
+          }
+        } else if (el.tagName === 'BR') {
+          text += '\n'
+        } else {
+          // Process children
+          Array.from(node.childNodes).forEach(processNode)
+        }
+      }
+    }
+    
+    Array.from(inputRef.current.childNodes).forEach(processNode)
+    return text
+  }, [])
+  
+  // Handle input events
+  const handleInput = useCallback(() => {
+    if (!inputRef.current || readOnly || isComposingRef.current) return
+    
+    const plainText = getPlainTextWithPlaceholders()
+    
+    // Check for @ mention trigger
+    const selection = window.getSelection()
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0)
+      
+      // Get the text up to cursor position
+      const tempRange = document.createRange()
+      tempRange.selectNodeContents(inputRef.current)
+      tempRange.setEnd(range.startContainer, range.startOffset)
+      
+      const textBeforeCursor = tempRange.toString()
+      const lastAtIndex = textBeforeCursor.lastIndexOf('@')
+      
+      if (lastAtIndex !== -1) {
+        const textAfterAt = textBeforeCursor.substring(lastAtIndex + 1)
+        
+        // Check if @ is at valid position (start or after space/newline)
+        const charBeforeAt = lastAtIndex > 0 ? textBeforeCursor[lastAtIndex - 1] : ''
+        if (lastAtIndex === 0 || charBeforeAt === ' ' || charBeforeAt === '\n') {
+          // Check if we're still typing (no space after @)
+          if (!textAfterAt.includes(' ') && !textAfterAt.includes('\n')) {
+            // Get position for menu
+            const rect = range.getBoundingClientRect()
+            setMentionSearch({
+              active: true,
+              startIndex: lastAtIndex,
+              searchText: textAfterAt,
+              position: {
+                top: rect.bottom + window.scrollY + 5,
+                left: rect.left + window.scrollX
+              }
+            })
+          } else {
+            setMentionSearch({ active: false, startIndex: -1, searchText: '', position: { top: 0, left: 0 } })
+          }
+        } else {
+          setMentionSearch({ active: false, startIndex: -1, searchText: '', position: { top: 0, left: 0 } })
+        }
+      } else {
+        setMentionSearch({ active: false, startIndex: -1, searchText: '', position: { top: 0, left: 0 } })
+      }
+    }
+    
+    // Update content
+    onChange(plainText, localMentions)
+  }, [getPlainTextWithPlaceholders, onChange, localMentions, readOnly])
+  
+  // Send notification for mention
+  const sendMentionNotification = useCallback(async (userId: string) => {
+    if (!pageId || !workspaceId) return
+    
+    try {
+      await fetch('/api/notifications/mention', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userId,
+          pageId,
+          workspaceId,
+          message: 'mentioned you in a page'
+        })
+      })
+    } catch (error) {
+      console.error('Failed to send mention notification:', error)
+    }
+  }, [pageId, workspaceId])
+  
+  // Handle mention selection
+  const handleMentionSelect = useCallback((user: User) => {
+    if (!inputRef.current || !mentionSearch.active) return
+    
+    // Get the current display text (not the content with placeholders)
+    const displayText = inputRef.current.textContent || ''
+    
+    // Calculate the correct positions
+    const beforeMention = displayText.substring(0, mentionSearch.startIndex)
+    const afterMention = displayText.substring(mentionSearch.startIndex + 1 + mentionSearch.searchText.length)
+    
+    // Create the new display text
+    const newDisplayText = beforeMention + `@${user.name || user.email} ` + afterMention
+    
+    // Now convert this back to content with placeholders
+    // We need to maintain existing mentions and add the new one
+    const currentContent = getPlainTextWithPlaceholders()
+    
+    // Find where to insert the mention in the actual content
+    // Count how many mentions come before this position
+    const mentionPattern = /@\[user:([^\]]+)\]/g
+    let contentOffset = 0
+    let displayOffset = 0
+    let match
+    
+    while ((match = mentionPattern.exec(currentContent)) !== null) {
+      const userId = match[1]
+      const mentionUser = localMentions[`user:${userId}`]
+      if (mentionUser) {
+        const mentionDisplayLength = mentionUser.name.length + 1 // +1 for @
+        const mentionContentLength = match[0].length
+        
+        if (displayOffset + mentionDisplayLength <= mentionSearch.startIndex) {
+          // This mention comes before our insertion point
+          contentOffset += mentionContentLength - mentionDisplayLength
+          displayOffset += mentionDisplayLength
+        } else {
+          break
+        }
+      }
+    }
+    
+    // Calculate the actual content position
+    const actualContentPosition = mentionSearch.startIndex + contentOffset
+    
+    // Build new content with the mention placeholder
+    const beforeInContent = currentContent.substring(0, actualContentPosition)
+    const afterInContent = currentContent.substring(actualContentPosition + 1 + mentionSearch.searchText.length)
+    const mentionPlaceholder = `@[user:${user.id}]`
+    const newContent = beforeInContent + mentionPlaceholder + ' ' + afterInContent
+    
+    // Update mentions
+    const newMentions = {
+      ...localMentions,
+      [`user:${user.id}`]: {
+        id: user.id,
+        name: user.name || user.email,
+        email: user.email
+      }
+    }
+    
+    // Update state
+    setLocalMentions(newMentions)
+    onChange(newContent, newMentions)
+    
+    // Send notification
+    sendMentionNotification(user.id)
+    
+    // Clear mention search
+    setMentionSearch({ active: false, startIndex: -1, searchText: '', position: { top: 0, left: 0 } })
+    
+    // Focus and position cursor after mention
+    setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus()
+        
+        // Find the position after the newly inserted mention
+        const selection = window.getSelection()
+        const range = document.createRange()
+        
+        // Calculate where to place cursor in the rendered content
+        const targetPosition = beforeMention.length + user.name.length + 2 // +2 for @ and space
+        
+        let currentPos = 0
+        let targetNode: Node | null = null
+        let targetOffset = 0
+        
+        const findPosition = (node: Node): boolean => {
+          if (targetNode) return true
+          
+          if (node.nodeType === Node.TEXT_NODE) {
+            const length = node.textContent?.length || 0
+            if (currentPos + length >= targetPosition) {
+              targetNode = node
+              targetOffset = targetPosition - currentPos
+              return true
+            }
+            currentPos += length
+          } else if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node as HTMLElement
+            if (el.classList?.contains('mention-chip')) {
+              const length = el.textContent?.length || 0
+              if (currentPos + length >= targetPosition) {
+                // Position after the mention chip
+                targetNode = el.nextSibling || el.parentNode
+                targetOffset = 0
+                return true
+              }
+              currentPos += length
+            } else {
+              for (const child of Array.from(node.childNodes)) {
+                if (findPosition(child)) return true
+              }
+            }
+          }
+          return false
+        }
+        
+        for (const node of Array.from(inputRef.current.childNodes)) {
+          if (findPosition(node)) break
+        }
+        
+        if (targetNode) {
+          try {
+            if (targetNode.nodeType === Node.TEXT_NODE) {
+              range.setStart(targetNode, Math.min(targetOffset, targetNode.textContent?.length || 0))
+            } else {
+              range.setStartAfter(targetNode)
+            }
+            range.collapse(true)
+            selection?.removeAllRanges()
+            selection?.addRange(range)
+          } catch (e) {
+            console.error('Error setting cursor position:', e)
+          }
+        }
+      }
+    }, 10)
+  }, [mentionSearch, localMentions, onChange, sendMentionNotification, getPlainTextWithPlaceholders])
+  
+  // Handle keyboard events
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Escape' && mentionSearch.active) {
+      e.preventDefault()
+      setMentionSearch({ active: false, startIndex: -1, searchText: '', position: { top: 0, left: 0 } })
+      return
+    }
+    
+    onKeyDown?.(e)
+  }, [onKeyDown, mentionSearch.active])
+  
+  // Handle composition events (for IME)
+  const handleCompositionStart = useCallback(() => {
+    isComposingRef.current = true
+  }, [])
+  
+  const handleCompositionEnd = useCallback(() => {
+    isComposingRef.current = false
+    handleInput()
+  }, [handleInput])
+  
+  // Handle paste
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    e.preventDefault()
+    const text = e.clipboardData.getData('text/plain')
+    document.execCommand('insertText', false, text)
+    handleInput()
+  }, [handleInput])
+  
+  // Handle focus/blur
+  const handleFocus = useCallback(() => {
+    if (inputRef.current && !content) {
+      inputRef.current.innerHTML = ''
+    }
+    onFocus?.()
+  }, [content, onFocus])
+  
+  const handleBlur = useCallback(() => {
+    if (inputRef.current && !content) {
+      inputRef.current.innerHTML = `<span style="color: #999;">${placeholder}</span>`
+    }
+    onBlur?.()
+  }, [content, placeholder, onBlur])
+  
+  return (
+    <>
+      <div
+        ref={inputRef}
+        contentEditable={!readOnly}
+        onInput={handleInput}
+        onKeyDown={handleKeyDown}
+        onCompositionStart={handleCompositionStart}
+        onCompositionEnd={handleCompositionEnd}
+        onPaste={handlePaste}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        className={cn(
+          'outline-none min-h-[1.5em] whitespace-pre-wrap',
+          className
+        )}
+        suppressContentEditableWarning
+        style={{ wordBreak: 'break-word' }}
+      />
+      
+      {mentionSearch.active && workspaceId && (
+        <MentionAutocomplete
+          isOpen={mentionSearch.active}
+          position={mentionSearch.position}
+          searchQuery={mentionSearch.searchText}
+          workspaceId={workspaceId}
+          onSelect={handleMentionSelect}
+          onClose={() => {
+            setMentionSearch({ active: false, startIndex: -1, searchText: '', position: { top: 0, left: 0 } })
+          }}
+        />
+      )}
+    </>
+  )
+}
\ No newline at end of file
diff --git a/components/editor/NotionEditor.tsx b/components/editor/NotionEditor.tsx
index 4e6f5fb..e6f9941 100644
--- a/components/editor/NotionEditor.tsx
+++ b/components/editor/NotionEditor.tsx
@@ -6,14 +6,13 @@ import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-ki
 import { Block as BlockType, EditorState, EditorAction, ListProperties, ListItem } from '@/types'
 import BlockV2 from './BlockV2'
 import SlashMenu from './SlashMenu'
-import MentionAutocomplete from './MentionAutocomplete'
+// MentionAutocomplete is now used internally by MentionInput
 import { generateId } from '@/lib/utils/id'
 import { pageContentService } from '@/lib/services/page-content'
 import { Save, Clock, AlertCircle } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import toast from 'react-hot-toast'
 import { useSocket } from '@/lib/socket/client'
-import { User } from '@prisma/client'
 
 interface NotionEditorProps {
   pageId: string
@@ -115,10 +114,6 @@ export default function NotionEditor({
   
   const [showSlashMenu, setShowSlashMenu] = useState(false)
   const [slashMenuPosition, setSlashMenuPosition] = useState({ top: 0, left: 0 })
-  const [showMentionMenu, setShowMentionMenu] = useState(false)
-  const [mentionMenuPosition, setMentionMenuPosition] = useState({ top: 0, left: 0 })
-  const [mentionSearchQuery, setMentionSearchQuery] = useState('')
-  const [currentMentionBlockId, setCurrentMentionBlockId] = useState<string | null>(null)
   const [saveStatus, setSaveStatus] = useState<SaveStatus>('saved')
   const [draggedBlock, setDraggedBlock] = useState<BlockType | null>(null)
   const [blockUsers, setBlockUsers] = useState<Map<string, { userId: string; userName: string; userColor: string }>>(new Map())
@@ -601,73 +596,7 @@ export default function NotionEditor({
     setShowSlashMenu(true)
   }, [])
   
-  const handleMentionCommand = useCallback((blockId: string, position: { top: number, left: number }, searchQuery: string) => {
-    setCurrentMentionBlockId(blockId)
-    setMentionMenuPosition(position)
-    setMentionSearchQuery(searchQuery)
-    setShowMentionMenu(true)
-  }, [])
-  
-  const handleMentionSelect = useCallback(async (user: User) => {
-    if (!currentMentionBlockId) return
-    
-    // Get the current block
-    const block = blocks.find(b => b.id === currentMentionBlockId)
-    if (!block) return
-    
-    // Replace @query with @username
-    let content = typeof block.content === 'string' ? block.content : ''
-    const atIndex = content.lastIndexOf('@')
-    if (atIndex !== -1) {
-      const beforeAt = content.substring(0, atIndex)
-      const mentionText = `@${user.name || user.email}`
-      content = `${beforeAt}${mentionText} `
-      
-      // Store mention metadata in block properties
-      const existingMentions = block.properties?.mentions || []
-      const newMention = {
-        userId: user.id,
-        userName: user.name || user.email || '',
-        startIndex: atIndex,
-        endIndex: atIndex + mentionText.length
-      }
-      
-      // Update block with content and mention metadata
-      updateBlock(currentMentionBlockId, { 
-        content,
-        properties: {
-          ...block.properties,
-          mentions: [...existingMentions, newMention]
-        }
-      })
-    }
-    
-    // Send notification to the mentioned user
-    if (workspaceId) {
-      try {
-        await fetch('/api/notifications', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            type: 'MENTION',
-            recipientId: user.id,
-            title: `You were mentioned`,
-            message: `You were mentioned in a page`,
-            pageId,
-            workspaceId,
-            metadata: { blockId: currentMentionBlockId }
-          })
-        })
-      } catch (error) {
-        console.error('Error sending mention notification:', error)
-      }
-    }
-    
-    // Close mention menu
-    setShowMentionMenu(false)
-    setCurrentMentionBlockId(null)
-    setMentionSearchQuery('')
-  }, [currentMentionBlockId, blocks, updateBlock, pageId, workspaceId])
+  // Mention handling has been moved to MentionInput component
 
   const handleSlashMenuSelect = useCallback((type: BlockType['type']) => {
     if (editorState.selectedBlockId) {
@@ -759,6 +688,8 @@ export default function NotionEditor({
             key={block.id}
             block={block}
             readOnly={true}
+            pageId={pageId}
+            workspaceId={workspaceId}
           />
         ))}
       </div>
@@ -798,7 +729,6 @@ export default function NotionEditor({
                 onDelete={deleteBlock}
                 onAddBlock={(type, afterBlockId) => addBlock(type, undefined, afterBlockId)}
                 onSlashCommand={handleSlashCommand}
-                onMentionCommand={handleMentionCommand}
                 onFocus={(blockId) => {
                   dispatch({ type: 'SELECT_BLOCK', payload: blockId })
                   // Send focus event to other users
@@ -816,6 +746,7 @@ export default function NotionEditor({
                 isSelected={block.id === editorState.selectedBlockId}
                 userPresence={blockUsers.get(block.id)}
                 workspaceId={workspaceId}
+                pageId={pageId}
               />
             ))}
           </SortableContext>
@@ -826,6 +757,8 @@ export default function NotionEditor({
                 <BlockV2
                   block={draggedBlock}
                   readOnly={true}
+                  pageId={pageId}
+                  workspaceId={workspaceId}
                 />
               </div>
             ) : null}
@@ -857,20 +790,6 @@ export default function NotionEditor({
           />
         )}
         
-        {showMentionMenu && workspaceId && (
-          <MentionAutocomplete
-            isOpen={showMentionMenu}
-            position={mentionMenuPosition}
-            searchQuery={mentionSearchQuery}
-            workspaceId={workspaceId}
-            onSelect={handleMentionSelect}
-            onClose={() => {
-              setShowMentionMenu(false)
-              setCurrentMentionBlockId(null)
-              setMentionSearchQuery('')
-            }}
-          />
-        )}
         
         {editorState.isLoading && (
           <div className="flex items-center justify-center p-8">
diff --git a/components/editor/blocks/HeadingBlock.tsx b/components/editor/blocks/HeadingBlock.tsx
index 100691c..496d2aa 100644
--- a/components/editor/blocks/HeadingBlock.tsx
+++ b/components/editor/blocks/HeadingBlock.tsx
@@ -2,16 +2,18 @@
 
 import React from 'react'
 import { Block, HeadingProperties } from '@/types'
-import ContentEditableV2 from '../ContentEditableV2'
+import MentionInput from '../MentionInput'
 import { cn } from '@/lib/utils'
 
 interface HeadingBlockProps {
   block: Block
-  onUpdate?: (content: string) => void
+  onUpdate?: (content: string, mentions?: any) => void
   onKeyDown?: (e: React.KeyboardEvent) => void
   onFocus?: () => void
   onBlur?: () => void
   readOnly?: boolean
+  workspaceId?: string
+  pageId?: string
 }
 
 export default function HeadingBlock({
@@ -20,13 +22,18 @@ export default function HeadingBlock({
   onKeyDown,
   onFocus,
   onBlur,
-  readOnly = false
+  readOnly = false,
+  workspaceId,
+  pageId
 }: HeadingBlockProps) {
   const content = typeof block.content === 'string' 
     ? block.content 
     : Array.isArray(block.content) 
       ? block.content.map(rt => rt.text).join('')
       : ''
+  
+  // Extract mentions from block properties
+  const mentions = block.properties?.mentions || {}
 
   const getHeadingStyles = () => {
     switch (block.type) {
@@ -54,16 +61,24 @@ export default function HeadingBlock({
     }
   }
 
+  const handleChange = (newContent: string, newMentions?: any) => {
+    // Pass both content and mentions to parent
+    onUpdate?.(newContent, newMentions)
+  }
+
   return (
-    <ContentEditableV2
+    <MentionInput
       content={content}
-      onChange={onUpdate || (() => {})}
+      mentions={mentions}
+      onChange={handleChange}
       onKeyDown={onKeyDown}
       onFocus={onFocus}
       onBlur={onBlur}
       className={cn("w-full outline-none", getHeadingStyles())}
       placeholder={getPlaceholder()}
       readOnly={readOnly}
+      workspaceId={workspaceId}
+      pageId={pageId}
     />
   )
 }
\ No newline at end of file
diff --git a/components/editor/blocks/QuoteBlock.tsx b/components/editor/blocks/QuoteBlock.tsx
index 038efb6..36f3814 100644
--- a/components/editor/blocks/QuoteBlock.tsx
+++ b/components/editor/blocks/QuoteBlock.tsx
@@ -2,36 +2,57 @@
 
 import React from 'react'
 import { Block } from '@/types'
-import ContentEditableV2 from '../ContentEditableV2'
+import MentionInput from '../MentionInput'
 
 interface QuoteBlockProps {
   block: Block
-  onUpdate?: (content: string) => void
+  onUpdate?: (content: string, mentions?: any) => void
   onKeyDown?: (e: React.KeyboardEvent) => void
+  onFocus?: () => void
+  onBlur?: () => void
   readOnly?: boolean
+  workspaceId?: string
+  pageId?: string
 }
 
 export default function QuoteBlock({
   block,
   onUpdate,
   onKeyDown,
-  readOnly = false
+  onFocus,
+  onBlur,
+  readOnly = false,
+  workspaceId,
+  pageId
 }: QuoteBlockProps) {
   const content = typeof block.content === 'string' 
     ? block.content 
     : Array.isArray(block.content) 
       ? block.content.map(rt => rt.text).join('')
       : ''
+  
+  // Extract mentions from block properties
+  const mentions = block.properties?.mentions || {}
+
+  const handleChange = (newContent: string, newMentions?: any) => {
+    // Pass both content and mentions to parent
+    onUpdate?.(newContent, newMentions)
+  }
 
   return (
     <div className="border-l-4 border-gray-300 dark:border-gray-600 pl-4 py-1">
-      <ContentEditableV2
+      <MentionInput
         content={content}
-        onChange={onUpdate || (() => {})}
+        mentions={mentions}
+        onChange={handleChange}
         onKeyDown={onKeyDown}
+        onFocus={onFocus}
+        onBlur={onBlur}
         className="w-full outline-none italic text-gray-700 dark:text-gray-300"
         placeholder="Quote"
         readOnly={readOnly}
+        workspaceId={workspaceId}
+        pageId={pageId}
       />
     </div>
   )
diff --git a/components/editor/blocks/TextBlock.tsx b/components/editor/blocks/TextBlock.tsx
index 357cf38..bc3eda3 100644
--- a/components/editor/blocks/TextBlock.tsx
+++ b/components/editor/blocks/TextBlock.tsx
@@ -2,18 +2,20 @@
 
 import React from 'react'
 import { Block } from '@/types'
-import ContentEditableV2 from '../ContentEditableV2'
+import MentionInput from '../MentionInput'
 import { cn } from '@/lib/utils'
 
 interface TextBlockProps {
   block: Block
-  onUpdate?: (content: string) => void
+  onUpdate?: (content: string, mentions?: any) => void
   onKeyDown?: (e: React.KeyboardEvent) => void
   onFocus?: () => void
   onBlur?: () => void
   readOnly?: boolean
   placeholder?: string
   className?: string
+  workspaceId?: string
+  pageId?: string
 }
 
 export default function TextBlock({
@@ -23,30 +25,38 @@ export default function TextBlock({
   onFocus,
   onBlur,
   readOnly = false,
-  placeholder = "Type '/' for commands",
-  className
+  placeholder = "Type '/' for commands, '@' to mention",
+  className,
+  workspaceId,
+  pageId
 }: TextBlockProps) {
   const content = typeof block.content === 'string' 
     ? block.content 
     : Array.isArray(block.content) 
       ? block.content.map(rt => rt.text).join('')
       : ''
-
+  
   // Extract mentions from block properties
-  const mentions = block.properties?.mentions || []
+  const mentions = block.properties?.mentions || {}
+
+  const handleChange = (newContent: string, newMentions?: any) => {
+    // Pass both content and mentions to parent
+    onUpdate?.(newContent, newMentions)
+  }
 
   return (
-    <ContentEditableV2
+    <MentionInput
       content={content}
-      onChange={onUpdate || (() => {})}
+      mentions={mentions}
+      onChange={handleChange}
       onKeyDown={onKeyDown}
       onFocus={onFocus}
       onBlur={onBlur}
       className={cn("w-full outline-none", className)}
       placeholder={placeholder}
       readOnly={readOnly}
-      allowFormatting={true}
-      mentions={mentions}
+      workspaceId={workspaceId}
+      pageId={pageId}
     />
   )
 }
\ No newline at end of file
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index fc30535..ced6b2c 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -44,7 +44,6 @@ import { AvatarUpload } from "@/components/ui/avatar-upload"
 import { NotificationInbox } from "@/components/inbox/NotificationInbox"
 import { cn } from "@/lib/utils"
 import toast from "react-hot-toast"
-import { formatDistanceToNow } from "date-fns"
 
 interface Workspace {
   id: string
@@ -71,7 +70,6 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
   const [refreshKey, setRefreshKey] = useState(0)
   const [settingsOpen, setSettingsOpen] = useState(false)
   const [showNotifications, setShowNotifications] = useState(false)
-  const [notifications, setNotifications] = useState<any[]>([])
   const [unreadCount, setUnreadCount] = useState(0)
   
   // Keyboard shortcuts
@@ -167,24 +165,23 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
     return () => clearInterval(interval)
   }, [currentWorkspace, pathname, refreshKey])
 
-  // Fetch notifications
+  // Fetch notification count only
   useEffect(() => {
-    const fetchNotifications = async () => {
+    const fetchNotificationCount = async () => {
       try {
-        const response = await fetch('/api/notifications?limit=5')
+        const response = await fetch('/api/notifications?limit=0')
         if (response.ok) {
           const data = await response.json()
-          setNotifications(data.notifications || [])
           setUnreadCount(data.unreadCount || 0)
         }
       } catch (error) {
-        console.error('Error fetching notifications:', error)
+        console.error('Error fetching notification count:', error)
       }
     }
     
-    fetchNotifications()
+    fetchNotificationCount()
     // Refresh every 30 seconds
-    const interval = setInterval(fetchNotifications, 30000)
+    const interval = setInterval(fetchNotificationCount, 30000)
     return () => clearInterval(interval)
   }, [])
 
@@ -193,33 +190,6 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
     router.push(`/workspace/${workspace.id}`)
   }
   
-  const handleNotificationClick = async (notification: any) => {
-    // Mark as read if unread
-    if (!notification.read) {
-      try {
-        await fetch('/api/notifications', {
-          method: 'PATCH',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ notificationIds: [notification.id] })
-        })
-        
-        // Update local state
-        setNotifications(prev => 
-          prev.map(n => 
-            n.id === notification.id ? { ...n, read: true } : n
-          )
-        )
-        setUnreadCount(prev => Math.max(0, prev - 1))
-      } catch (error) {
-        console.error('Error marking notification as read:', error)
-      }
-    }
-    
-    // Navigate to the page
-    if (notification.page && notification.workspace) {
-      router.push(`/workspace/${notification.workspace.id}/page/${notification.page.id}`)
-    }
-  }
 
   const handleCreatePage = async (parentId?: string) => {
     if (!currentWorkspace || isCreatingPage) return
@@ -380,65 +350,21 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
             <SidebarItem icon={<Inbox />} label="Inbox" onClick={() => {}} />
             
             {/* Notifications Section */}
-            <div className="relative">
-              <SidebarItem 
-                icon={<Bell />} 
-                label={
-                  <span className="flex items-center justify-between w-full">
-                    <span>Notifications</span>
-                    {unreadCount > 0 && (
-                      <span className="ml-auto bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full min-w-[18px] text-center">
-                        {unreadCount > 99 ? '99+' : unreadCount}
-                      </span>
-                    )}
-                  </span>
-                }
-                onClick={() => setShowNotifications(true)}
-                active={false}
-              />
-              
-              {/* Recent Notifications Preview */}
-              {notifications.length > 0 && (
-                <div className="ml-6 mt-1 space-y-1">
-                  {notifications.slice(0, 3).map((notification) => (
-                    <button
-                      key={notification.id}
-                      onClick={() => handleNotificationClick(notification)}
-                      className={cn(
-                        "w-full text-left px-2 py-1.5 rounded-sm text-xs transition-colors",
-                        "hover:bg-[#e5e5e4] dark:hover:bg-[#373737]",
-                        !notification.read && "bg-blue-50/50 dark:bg-blue-900/10"
-                      )}
-                    >
-                      <div className="flex items-start gap-2">
-                        {!notification.read && (
-                          <Circle className="h-2 w-2 mt-1 fill-blue-500 text-blue-500" />
-                        )}
-                        <div className="flex-1 min-w-0">
-                          <p className="text-[11px] font-medium truncate">
-                            {notification.title}
-                          </p>
-                          <p className="text-[10px] text-[#787774] dark:text-[#979797] truncate">
-                            {notification.message}
-                          </p>
-                          <p className="text-[10px] text-[#787774] dark:text-[#979797]">
-                            {formatDistanceToNow(new Date(notification.createdAt), { addSuffix: true })}
-                          </p>
-                        </div>
-                      </div>
-                    </button>
-                  ))}
-                  {notifications.length > 3 && (
-                    <button
-                      onClick={() => setShowNotifications(true)}
-                      className="w-full text-left px-2 py-1 text-[10px] text-blue-600 dark:text-blue-400 hover:underline"
-                    >
-                      View all {notifications.length} notifications →
-                    </button>
+            <SidebarItem 
+              icon={<Bell />} 
+              label={
+                <span className="flex items-center justify-between w-full">
+                  <span>Notifications</span>
+                  {unreadCount > 0 && (
+                    <span className="ml-auto bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full min-w-[18px] text-center">
+                      {unreadCount > 99 ? '99+' : unreadCount}
+                    </span>
                   )}
-                </div>
-              )}
-            </div>
+                </span>
+              }
+              onClick={() => setShowNotifications(true)}
+              active={false}
+            />
             
             <SidebarItem 
               icon={<Trash2 />} 
@@ -545,10 +471,9 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
           // Refresh notifications after closing
           setTimeout(async () => {
             try {
-              const response = await fetch('/api/notifications?limit=5')
+              const response = await fetch('/api/notifications?limit=0')
               if (response.ok) {
                 const data = await response.json()
-                setNotifications(data.notifications || [])
                 setUnreadCount(data.unreadCount || 0)
               }
             } catch (error) {
diff --git a/lib/utils/mentions.ts b/lib/utils/mentions.ts
new file mode 100644
index 0000000..6864a7e
--- /dev/null
+++ b/lib/utils/mentions.ts
@@ -0,0 +1,88 @@
+import { prisma } from '@/lib/db/prisma'
+
+/**
+ * Extract user IDs from mention placeholders in content
+ */
+export function extractMentionIds(content: string): string[] {
+  const mentionPattern = /@\[user:([^\]]+)\]/g
+  const userIds: string[] = []
+  let match
+  
+  while ((match = mentionPattern.exec(content)) !== null) {
+    userIds.push(match[1])
+  }
+  
+  return [...new Set(userIds)] // Remove duplicates
+}
+
+/**
+ * Fetch user data for mentions
+ */
+export async function fetchMentionUsers(userIds: string[]) {
+  if (userIds.length === 0) return {}
+  
+  try {
+    const users = await prisma.user.findMany({
+      where: {
+        id: {
+          in: userIds
+        }
+      },
+      select: {
+        id: true,
+        name: true,
+        email: true
+      }
+    })
+    
+    const mentions: Record<string, any> = {}
+    users.forEach(user => {
+      mentions[`user:${user.id}`] = {
+        id: user.id,
+        name: user.name || user.email,
+        email: user.email
+      }
+    })
+    
+    return mentions
+  } catch (error) {
+    console.error('Error fetching mention users:', error)
+    return {}
+  }
+}
+
+/**
+ * Process blocks to ensure mentions are populated
+ */
+export async function ensureMentionsPopulated(blocks: any[]) {
+  const processedBlocks = []
+  
+  for (const block of blocks) {
+    const content = typeof block.content === 'string' ? block.content : ''
+    const userIds = extractMentionIds(content)
+    
+    if (userIds.length > 0) {
+      // Check if mentions are already populated
+      const existingMentions = block.properties?.mentions || {}
+      const missingUserIds = userIds.filter(id => !existingMentions[`user:${id}`])
+      
+      if (missingUserIds.length > 0) {
+        // Fetch missing user data
+        const newMentions = await fetchMentionUsers(missingUserIds)
+        
+        // Merge with existing mentions
+        block.properties = {
+          ...block.properties,
+          mentions: {
+            ...existingMentions,
+            ...newMentions
+          }
+        }
+      }
+    }
+    
+    processedBlocks.push(block)
+  }
+  
+  return processedBlocks
+}
\ No newline at end of file

From 6586e3efecefab7cd26b44227bee19a277763f96 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Mon, 25 Aug 2025 00:15:50 +0530
Subject: [PATCH 35/43] working notification

---
 app/api/notifications/mention/route.ts        |  15 +-
 components/layout/notion-sidebar.tsx          |  20 +-
 components/notifications/NotificationBell.tsx | 261 ++++++++++++++++++
 3 files changed, 281 insertions(+), 15 deletions(-)
 create mode 100644 components/notifications/NotificationBell.tsx

diff --git a/app/api/notifications/mention/route.ts b/app/api/notifications/mention/route.ts
index 1a16b7f..72d9a0e 100644
--- a/app/api/notifications/mention/route.ts
+++ b/app/api/notifications/mention/route.ts
@@ -45,19 +45,20 @@ export async function POST(req: Request) {
       return NextResponse.json({ error: 'Page not found' }, { status: 404 })
     }
 
-    // Create a notification (you might want to create a Notification model in your schema)
-    // For now, we'll create an activity log entry
-    await prisma.activityLog.create({
+    // Create a notification using the Notification model
+    const notification = await prisma.notification.create({
       data: {
         type: 'MENTION',
-        userId: mentionedUser.id,
+        title: 'New mention',
+        message: `${currentUser.name || currentUser.email} mentioned you in "${page.title || 'Untitled'}"`,
+        recipientId: mentionedUser.id,
+        mentionedById: currentUser.id,
         pageId,
         workspaceId,
+        read: false,
         metadata: {
-          mentionedBy: currentUser.name || currentUser.email,
-          mentionedById: currentUser.id,
           pageTitle: page.title,
-          message: `${currentUser.name || currentUser.email} ${message}`
+          mentionedByName: currentUser.name || currentUser.email
         }
       }
     })
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index ced6b2c..48b1215 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -42,6 +42,7 @@ import { SearchDialog } from "@/components/search/SearchDialog"
 import { SettingsModal } from "@/components/settings/SettingsModal"
 import { AvatarUpload } from "@/components/ui/avatar-upload"
 import { NotificationInbox } from "@/components/inbox/NotificationInbox"
+import NotificationBell from "@/components/notifications/NotificationBell"
 import { cn } from "@/lib/utils"
 import toast from "react-hot-toast"
 
@@ -307,14 +308,17 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
             </DropdownMenuContent>
           </DropdownMenu>
 
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7 hover:bg-[#e5e5e4] dark:hover:bg-[#373737]"
-            onClick={() => setCollapsed(true)}
-          >
-            <ChevronsLeft className="h-4 w-4" />
-          </Button>
+          <div className="flex items-center gap-1">
+            <NotificationBell />
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 hover:bg-[#e5e5e4] dark:hover:bg-[#373737]"
+              onClick={() => setCollapsed(true)}
+            >
+              <ChevronsLeft className="h-4 w-4" />
+            </Button>
+          </div>
         </div>
 
         {/* Quick Actions */}
diff --git a/components/notifications/NotificationBell.tsx b/components/notifications/NotificationBell.tsx
new file mode 100644
index 0000000..6ca5ca7
--- /dev/null
+++ b/components/notifications/NotificationBell.tsx
@@ -0,0 +1,261 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import { Bell } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { useRouter } from 'next/navigation'
+import { formatDistanceToNow } from 'date-fns'
+import { cn } from '@/lib/utils'
+
+interface Notification {
+  id: string
+  type: string
+  title?: string
+  message?: string
+  read: boolean
+  createdAt: string
+  mentionedBy?: {
+    id: string
+    name: string | null
+    email: string
+    avatarUrl: string | null
+  }
+  page?: {
+    id: string
+    title: string | null
+    icon: string | null
+  }
+  workspace?: {
+    id: string
+    name: string
+    slug: string | null
+  }
+}
+
+export default function NotificationBell() {
+  const [notifications, setNotifications] = useState<Notification[]>([])
+  const [unreadCount, setUnreadCount] = useState(0)
+  const [isOpen, setIsOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const router = useRouter()
+
+  // Fetch notifications
+  const fetchNotifications = useCallback(async () => {
+    try {
+      setIsLoading(true)
+      const response = await fetch('/api/notifications?limit=10')
+      if (response.ok) {
+        const data = await response.json()
+        setNotifications(data.notifications || [])
+        setUnreadCount(data.unreadCount || 0)
+      }
+    } catch (error) {
+      console.error('Error fetching notifications:', error)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  // Mark notifications as read
+  const markAsRead = useCallback(async (notificationIds: string[]) => {
+    try {
+      await fetch('/api/notifications', {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ notificationIds })
+      })
+      
+      // Update local state
+      setNotifications(prev => 
+        prev.map(n => 
+          notificationIds.includes(n.id) 
+            ? { ...n, read: true }
+            : n
+        )
+      )
+      setUnreadCount(prev => Math.max(0, prev - notificationIds.length))
+    } catch (error) {
+      console.error('Error marking notifications as read:', error)
+    }
+  }, [])
+
+  // Navigate to page
+  const handleNotificationClick = useCallback(async (notification: Notification) => {
+    // Mark as read if not already
+    if (!notification.read) {
+      await markAsRead([notification.id])
+    }
+    
+    // Navigate to the page if it exists
+    if (notification.page && notification.workspace) {
+      router.push(`/workspace/${notification.workspace.id}/page/${notification.page.id}`)
+      setIsOpen(false)
+    }
+  }, [router, markAsRead])
+
+  // Fetch notifications on mount and periodically
+  useEffect(() => {
+    fetchNotifications()
+    
+    // Poll for new notifications every 30 seconds
+    const interval = setInterval(fetchNotifications, 30000)
+    
+    return () => clearInterval(interval)
+  }, [fetchNotifications])
+
+  // Mark visible unread notifications as read after a delay
+  useEffect(() => {
+    if (isOpen && unreadCount > 0) {
+      const unreadIds = notifications
+        .filter(n => !n.read)
+        .slice(0, 5) // Only mark visible ones as read
+        .map(n => n.id)
+      
+      if (unreadIds.length > 0) {
+        const timer = setTimeout(() => {
+          markAsRead(unreadIds)
+        }, 2000) // 2 second delay
+        
+        return () => clearTimeout(timer)
+      }
+    }
+  }, [isOpen, notifications, unreadCount, markAsRead])
+
+  // Format notification message
+  const getNotificationMessage = (notification: Notification) => {
+    if (notification.type === 'MENTION') {
+      return `mentioned you in "${notification.page?.title || 'Untitled'}"`;
+    }
+    return notification.message || 'New notification';
+  }
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="relative h-7 w-7 hover:bg-[#e5e5e4] dark:hover:bg-[#373737]"
+          aria-label="Notifications"
+        >
+          <Bell className="h-4 w-4" />
+          {unreadCount > 0 && (
+            <span className="absolute -top-0.5 -right-0.5 h-4 w-4 flex items-center justify-center">
+              <span className="absolute inline-flex h-3 w-3 rounded-full bg-red-500 opacity-75 animate-ping" />
+              <span className="relative inline-flex items-center justify-center h-4 w-4 rounded-full bg-red-500 text-[10px] text-white font-medium">
+                {unreadCount > 9 ? '9+' : unreadCount}
+              </span>
+            </span>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-80" sideOffset={5}>
+        <DropdownMenuLabel className="font-semibold flex items-center justify-between">
+          <span>Notifications</span>
+          {unreadCount > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-auto p-0 text-xs text-muted-foreground hover:text-foreground"
+              onClick={(e) => {
+                e.preventDefault()
+                markAsRead(notifications.filter(n => !n.read).map(n => n.id))
+              }}
+            >
+              Mark all as read
+            </Button>
+          )}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        
+        {isLoading ? (
+          <div className="p-4 text-center text-sm text-muted-foreground">
+            Loading...
+          </div>
+        ) : notifications.length === 0 ? (
+          <div className="p-4 text-center text-sm text-muted-foreground">
+            No notifications yet
+          </div>
+        ) : (
+          <div className="max-h-[400px] overflow-y-auto">
+            {notifications.map(notification => (
+              <DropdownMenuItem
+                key={notification.id}
+                className={cn(
+                  "flex items-start gap-3 p-3 cursor-pointer",
+                  !notification.read && "bg-blue-50 dark:bg-blue-950/20 hover:bg-blue-100 dark:hover:bg-blue-950/30"
+                )}
+                onClick={() => handleNotificationClick(notification)}
+              >
+                {/* Avatar or Icon */}
+                <div className="shrink-0 mt-0.5">
+                  {notification.mentionedBy?.avatarUrl ? (
+                    <img
+                      src={notification.mentionedBy.avatarUrl}
+                      alt={notification.mentionedBy.name || ''}
+                      className="h-8 w-8 rounded-full"
+                    />
+                  ) : (
+                    <div className="h-8 w-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-white text-xs font-medium">
+                      {notification.mentionedBy?.name?.charAt(0) || notification.mentionedBy?.email?.charAt(0) || '?'}
+                    </div>
+                  )}
+                </div>
+                
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex-1">
+                      <p className="text-sm">
+                        <span className="font-medium">
+                          {notification.mentionedBy?.name || notification.mentionedBy?.email || 'Someone'}
+                        </span>
+                        {' '}
+                        <span className="text-muted-foreground">
+                          {getNotificationMessage(notification)}
+                        </span>
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {formatDistanceToNow(new Date(notification.createdAt), { addSuffix: true })}
+                      </p>
+                    </div>
+                    {!notification.read && (
+                      <div className="w-2 h-2 bg-blue-500 rounded-full shrink-0 mt-1.5" />
+                    )}
+                  </div>
+                </div>
+              </DropdownMenuItem>
+            ))}
+          </div>
+        )}
+        
+        {notifications.length > 10 && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="text-center text-sm text-muted-foreground cursor-pointer justify-center"
+              onClick={() => {
+                // Navigate to a notifications page if you have one
+                // router.push('/notifications')
+                setIsOpen(false)
+              }}
+            >
+              View all notifications
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
\ No newline at end of file

From aa49cea7c0fcd6f738fc3f07bf9a4d5645e9cc3c Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Mon, 25 Aug 2025 00:21:46 +0530
Subject: [PATCH 36/43] avatar gradient

---
 components/layout/notion-sidebar.tsx          | 61 -------------------
 components/notifications/NotificationBell.tsx |  2 +-
 2 files changed, 1 insertion(+), 62 deletions(-)

diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index 48b1215..4372d08 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -25,7 +25,6 @@ import {
   Calendar,
   Inbox,
   File,
-  Bell,
   Circle
 } from "lucide-react"
 import {
@@ -41,7 +40,6 @@ import { CreateWorkspaceModal } from "@/components/workspace/create-workspace-mo
 import { SearchDialog } from "@/components/search/SearchDialog"
 import { SettingsModal } from "@/components/settings/SettingsModal"
 import { AvatarUpload } from "@/components/ui/avatar-upload"
-import { NotificationInbox } from "@/components/inbox/NotificationInbox"
 import NotificationBell from "@/components/notifications/NotificationBell"
 import { cn } from "@/lib/utils"
 import toast from "react-hot-toast"
@@ -70,8 +68,6 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
   const [collapsed, setCollapsed] = useState(false)
   const [refreshKey, setRefreshKey] = useState(0)
   const [settingsOpen, setSettingsOpen] = useState(false)
-  const [showNotifications, setShowNotifications] = useState(false)
-  const [unreadCount, setUnreadCount] = useState(0)
   
   // Keyboard shortcuts
   useEffect(() => {
@@ -166,26 +162,6 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
     return () => clearInterval(interval)
   }, [currentWorkspace, pathname, refreshKey])
 
-  // Fetch notification count only
-  useEffect(() => {
-    const fetchNotificationCount = async () => {
-      try {
-        const response = await fetch('/api/notifications?limit=0')
-        if (response.ok) {
-          const data = await response.json()
-          setUnreadCount(data.unreadCount || 0)
-        }
-      } catch (error) {
-        console.error('Error fetching notification count:', error)
-      }
-    }
-    
-    fetchNotificationCount()
-    // Refresh every 30 seconds
-    const interval = setInterval(fetchNotificationCount, 30000)
-    return () => clearInterval(interval)
-  }, [])
-
   const handleWorkspaceChange = (workspace: Workspace) => {
     setCurrentWorkspace(workspace)
     router.push(`/workspace/${workspace.id}`)
@@ -353,23 +329,6 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
           <div className="space-y-0.5 pb-2">
             <SidebarItem icon={<Inbox />} label="Inbox" onClick={() => {}} />
             
-            {/* Notifications Section */}
-            <SidebarItem 
-              icon={<Bell />} 
-              label={
-                <span className="flex items-center justify-between w-full">
-                  <span>Notifications</span>
-                  {unreadCount > 0 && (
-                    <span className="ml-auto bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full min-w-[18px] text-center">
-                      {unreadCount > 99 ? '99+' : unreadCount}
-                    </span>
-                  )}
-                </span>
-              }
-              onClick={() => setShowNotifications(true)}
-              active={false}
-            />
-            
             <SidebarItem 
               icon={<Trash2 />} 
               label="Trash" 
@@ -466,26 +425,6 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
         user={user}
         workspaceId={currentWorkspace?.id}
       />
-      
-      {/* Notification Inbox Modal */}
-      <NotificationInbox 
-        isOpen={showNotifications} 
-        onClose={() => {
-          setShowNotifications(false)
-          // Refresh notifications after closing
-          setTimeout(async () => {
-            try {
-              const response = await fetch('/api/notifications?limit=0')
-              if (response.ok) {
-                const data = await response.json()
-                setUnreadCount(data.unreadCount || 0)
-              }
-            } catch (error) {
-              console.error('Error fetching notifications:', error)
-            }
-          }, 500)
-        }} 
-      />
     </>
   )
 }
diff --git a/components/notifications/NotificationBell.tsx b/components/notifications/NotificationBell.tsx
index 6ca5ca7..bad98ca 100644
--- a/components/notifications/NotificationBell.tsx
+++ b/components/notifications/NotificationBell.tsx
@@ -207,7 +207,7 @@ export default function NotificationBell() {
                       className="h-8 w-8 rounded-full"
                     />
                   ) : (
-                    <div className="h-8 w-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-white text-xs font-medium">
+                    <div className="h-8 w-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-300 text-xs font-medium">
                       {notification.mentionedBy?.name?.charAt(0) || notification.mentionedBy?.email?.charAt(0) || '?'}
                     </div>
                   )}

From 4c914af56948f31c3d3ed506e28590f7fb0354f1 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Mon, 25 Aug 2025 11:23:22 +0530
Subject: [PATCH 37/43] add presence fix

---
 components/editor/CollaborationPresence.tsx | 234 +++++++++++++
 components/editor/MentionInput.tsx          |  38 ++-
 components/editor/NotionEditor.tsx          |   1 +
 components/editor/blocks/HeadingBlock.tsx   |   5 +-
 components/editor/blocks/QuoteBlock.tsx     |   5 +-
 components/editor/blocks/TextBlock.tsx      |   5 +-
 components/layout/notion-sidebar.tsx        |   4 -
 components/page/notion-page-header.tsx      | 146 +++-----
 components/settings/SettingsModal.tsx       |   8 +-
 lib/collaboration/ot.ts                     | 361 ++++++++++++++++++++
 lib/socket/client.tsx                       |  69 +++-
 lib/socket/server.ts                        |   5 +-
 server.js                                   |  87 +++++
 13 files changed, 851 insertions(+), 117 deletions(-)
 create mode 100644 components/editor/CollaborationPresence.tsx
 create mode 100644 lib/collaboration/ot.ts

diff --git a/components/editor/CollaborationPresence.tsx b/components/editor/CollaborationPresence.tsx
new file mode 100644
index 0000000..6a8f87f
--- /dev/null
+++ b/components/editor/CollaborationPresence.tsx
@@ -0,0 +1,234 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { useSocket } from '@/lib/socket/client'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { cn } from '@/lib/utils'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+
+interface CollaborationPresenceProps {
+  pageId: string
+  currentUserId?: string
+}
+
+interface UserCursor {
+  userId: string
+  userName: string
+  userColor: string
+  position: { x: number; y: number }
+  lastUpdate: number
+}
+
+interface UserSelection {
+  userId: string
+  userName: string
+  userColor: string
+  blockId: string
+  selection: { start: number; end: number } | null
+}
+
+interface UserTyping {
+  userId: string
+  userName: string
+  blockId: string
+  isTyping: boolean
+}
+
+export default function CollaborationPresence({ pageId, currentUserId }: CollaborationPresenceProps) {
+  const { currentUsers, onCursorMove, onSelectionChange, onUserTyping, isConnected } = useSocket()
+  const [userCursors, setUserCursors] = useState<Map<string, UserCursor>>(new Map())
+  const [userSelections, setUserSelections] = useState<Map<string, UserSelection>>(new Map())
+  const [userTyping, setUserTyping] = useState<Map<string, UserTyping>>(new Map())
+  
+  // Listen for cursor movements
+  useEffect(() => {
+    if (!onCursorMove) return
+    
+    const cleanup = onCursorMove((data: any) => {
+      if (data.userId === currentUserId) return
+      
+      setUserCursors(prev => {
+        const newMap = new Map(prev)
+        newMap.set(data.userId, {
+          userId: data.userId,
+          userName: data.userName,
+          userColor: data.userColor,
+          position: data.position,
+          lastUpdate: Date.now()
+        })
+        return newMap
+      })
+      
+      // Remove cursor after 5 seconds of inactivity
+      setTimeout(() => {
+        setUserCursors(prev => {
+          const cursor = prev.get(data.userId)
+          if (cursor && Date.now() - cursor.lastUpdate > 5000) {
+            const newMap = new Map(prev)
+            newMap.delete(data.userId)
+            return newMap
+          }
+          return prev
+        })
+      }, 5100)
+    })
+    
+    return cleanup
+  }, [onCursorMove, currentUserId])
+  
+  // Listen for selection changes
+  useEffect(() => {
+    if (!onSelectionChange) return
+    
+    const cleanup = onSelectionChange((data: any) => {
+      if (data.userId === currentUserId) return
+      
+      if (data.selection) {
+        setUserSelections(prev => {
+          const newMap = new Map(prev)
+          newMap.set(data.userId, {
+            userId: data.userId,
+            userName: data.userName,
+            userColor: data.userColor,
+            blockId: data.blockId,
+            selection: data.selection
+          })
+          return newMap
+        })
+      } else {
+        setUserSelections(prev => {
+          const newMap = new Map(prev)
+          newMap.delete(data.userId)
+          return newMap
+        })
+      }
+    })
+    
+    return cleanup
+  }, [onSelectionChange, currentUserId])
+  
+  // Listen for typing indicators
+  useEffect(() => {
+    if (!onUserTyping) return
+    
+    const cleanup = onUserTyping((data: any) => {
+      if (data.userId === currentUserId) return
+      
+      if (data.isTyping) {
+        setUserTyping(prev => {
+          const newMap = new Map(prev)
+          newMap.set(data.userId, {
+            userId: data.userId,
+            userName: data.userName,
+            blockId: data.blockId,
+            isTyping: true
+          })
+          return newMap
+        })
+        
+        // Auto-remove typing indicator after 3 seconds
+        setTimeout(() => {
+          setUserTyping(prev => {
+            const newMap = new Map(prev)
+            newMap.delete(data.userId)
+            return newMap
+          })
+        }, 3000)
+      } else {
+        setUserTyping(prev => {
+          const newMap = new Map(prev)
+          newMap.delete(data.userId)
+          return newMap
+        })
+      }
+    })
+    
+    return cleanup
+  }, [onUserTyping, currentUserId])
+  
+  // Render cursors
+  const renderCursors = () => {
+    return Array.from(userCursors.values()).map(cursor => (
+      <div
+        key={cursor.userId}
+        className="fixed pointer-events-none z-50 transition-all duration-100"
+        style={{
+          left: cursor.position.x,
+          top: cursor.position.y,
+          transform: 'translate(-50%, -50%)'
+        }}
+      >
+        <div
+          className="w-4 h-4 rounded-full border-2 border-white shadow-lg animate-pulse"
+          style={{ backgroundColor: cursor.userColor }}
+        />
+        <div
+          className="absolute -top-6 left-1/2 -translate-x-1/2 px-2 py-0.5 text-xs font-medium text-white rounded whitespace-nowrap"
+          style={{ backgroundColor: cursor.userColor }}
+        >
+          {cursor.userName}
+        </div>
+      </div>
+    ))
+  }
+  
+  // Show active users in the top bar
+  const renderActiveUsers = () => {
+    const users = Array.from(currentUsers.values()).filter(u => u.userId !== currentUserId)
+    
+    if (users.length === 0) return null
+    
+    return (
+      <div className="fixed top-20 right-4 z-40 flex items-center gap-2">
+        <div className="flex items-center gap-1 bg-white dark:bg-gray-800 rounded-full shadow-md px-3 py-1.5">
+          <div className="flex -space-x-2">
+            <TooltipProvider>
+              {users.slice(0, 5).map(user => (
+                <Tooltip key={user.userId}>
+                  <TooltipTrigger asChild>
+                    <div
+                      className="relative inline-flex items-center justify-center w-8 h-8 rounded-full border-2 border-white dark:border-gray-800 text-xs font-medium text-white"
+                      style={{ backgroundColor: user.color }}
+                    >
+                      {user.name.charAt(0).toUpperCase()}
+                      {userTyping.has(user.userId) && (
+                        <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full animate-pulse border border-white" />
+                      )}
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{user.name}</p>
+                    {userTyping.has(user.userId) && (
+                      <p className="text-xs text-green-500">Typing...</p>
+                    )}
+                  </TooltipContent>
+                </Tooltip>
+              ))}
+            </TooltipProvider>
+          </div>
+          {users.length > 5 && (
+            <span className="ml-2 text-sm text-gray-600 dark:text-gray-400">
+              +{users.length - 5}
+            </span>
+          )}
+        </div>
+        
+        <div className="flex items-center gap-1.5 px-2.5 py-1 bg-green-100 dark:bg-green-900/30 rounded-full">
+          <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+          <span className="text-xs font-medium text-green-700 dark:text-green-400">
+            {users.length} {users.length === 1 ? 'user' : 'users'} online
+          </span>
+        </div>
+      </div>
+    )
+  }
+  
+  if (!isConnected) return null
+  
+  return (
+    <>
+      {renderActiveUsers()}
+      {renderCursors()}
+    </>
+  )
+}
\ No newline at end of file
diff --git a/components/editor/MentionInput.tsx b/components/editor/MentionInput.tsx
index 60f4a60..8c40532 100644
--- a/components/editor/MentionInput.tsx
+++ b/components/editor/MentionInput.tsx
@@ -4,6 +4,8 @@ import React, { useRef, useState, useEffect, useCallback } from 'react'
 import { cn } from '@/lib/utils'
 import MentionAutocomplete from './MentionAutocomplete'
 import { User } from '@prisma/client'
+import { useSocket } from '@/lib/socket/client'
+import { useSession } from 'next-auth/react'
 
 interface MentionData {
   [key: string]: {
@@ -25,6 +27,7 @@ interface MentionInputProps {
   readOnly?: boolean
   workspaceId?: string
   pageId?: string
+  blockId?: string
 }
 
 interface MentionSearchState {
@@ -45,9 +48,12 @@ export default function MentionInput({
   placeholder = "Type '/' for commands, '@' to mention",
   readOnly = false,
   workspaceId,
-  pageId
+  pageId,
+  blockId
 }: MentionInputProps) {
   const inputRef = useRef<HTMLDivElement>(null)
+  const { sendUserMentioned, sendTypingStart, sendTypingStop } = useSocket()
+  const { data: session } = useSession()
   const [localMentions, setLocalMentions] = useState(mentions)
   const [mentionSearch, setMentionSearch] = useState<MentionSearchState>({
     active: false,
@@ -57,6 +63,7 @@ export default function MentionInput({
   })
   const isComposingRef = useRef(false)
   const lastContentRef = useRef(content)
+  const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   
   // Update local mentions when prop changes
   useEffect(() => {
@@ -216,6 +223,21 @@ export default function MentionInput({
     
     const plainText = getPlainTextWithPlaceholders()
     
+    // Send typing indicator
+    if (pageId && blockId) {
+      sendTypingStart(pageId, blockId)
+      
+      // Clear existing timeout
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current)
+      }
+      
+      // Set new timeout to stop typing indicator
+      typingTimeoutRef.current = setTimeout(() => {
+        sendTypingStop(pageId, blockId)
+      }, 1000)
+    }
+    
     // Check for @ mention trigger
     const selection = window.getSelection()
     if (selection && selection.rangeCount > 0) {
@@ -261,13 +283,14 @@ export default function MentionInput({
     
     // Update content
     onChange(plainText, localMentions)
-  }, [getPlainTextWithPlaceholders, onChange, localMentions, readOnly])
+  }, [getPlainTextWithPlaceholders, onChange, localMentions, readOnly, pageId, blockId, sendTypingStart, sendTypingStop])
   
   // Send notification for mention
   const sendMentionNotification = useCallback(async (userId: string) => {
     if (!pageId || !workspaceId) return
     
     try {
+      // Send via REST API for persistent notification
       await fetch('/api/notifications/mention', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -278,10 +301,19 @@ export default function MentionInput({
           message: 'mentioned you in a page'
         })
       })
+      
+      // Send real-time notification via socket
+      if (session?.user && blockId) {
+        sendUserMentioned(userId, pageId, blockId || '', {
+          id: session.user.id,
+          name: session.user.name || session.user.email,
+          email: session.user.email
+        })
+      }
     } catch (error) {
       console.error('Failed to send mention notification:', error)
     }
-  }, [pageId, workspaceId])
+  }, [pageId, workspaceId, blockId, session, sendUserMentioned])
   
   // Handle mention selection
   const handleMentionSelect = useCallback((user: User) => {
diff --git a/components/editor/NotionEditor.tsx b/components/editor/NotionEditor.tsx
index e6f9941..bb0ad2c 100644
--- a/components/editor/NotionEditor.tsx
+++ b/components/editor/NotionEditor.tsx
@@ -13,6 +13,7 @@ import { Save, Clock, AlertCircle } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import toast from 'react-hot-toast'
 import { useSocket } from '@/lib/socket/client'
+import { transformOperations, applyOperation, createDiff, Operation } from '@/lib/collaboration/ot'
 
 interface NotionEditorProps {
   pageId: string
diff --git a/components/editor/blocks/HeadingBlock.tsx b/components/editor/blocks/HeadingBlock.tsx
index 496d2aa..65ea82f 100644
--- a/components/editor/blocks/HeadingBlock.tsx
+++ b/components/editor/blocks/HeadingBlock.tsx
@@ -14,6 +14,7 @@ interface HeadingBlockProps {
   readOnly?: boolean
   workspaceId?: string
   pageId?: string
+  blockId?: string
 }
 
 export default function HeadingBlock({
@@ -24,7 +25,8 @@ export default function HeadingBlock({
   onBlur,
   readOnly = false,
   workspaceId,
-  pageId
+  pageId,
+  blockId
 }: HeadingBlockProps) {
   const content = typeof block.content === 'string' 
     ? block.content 
@@ -70,6 +72,7 @@ export default function HeadingBlock({
     <MentionInput
       content={content}
       mentions={mentions}
+      blockId={blockId || block.id}
       onChange={handleChange}
       onKeyDown={onKeyDown}
       onFocus={onFocus}
diff --git a/components/editor/blocks/QuoteBlock.tsx b/components/editor/blocks/QuoteBlock.tsx
index 36f3814..e9a5a8e 100644
--- a/components/editor/blocks/QuoteBlock.tsx
+++ b/components/editor/blocks/QuoteBlock.tsx
@@ -13,6 +13,7 @@ interface QuoteBlockProps {
   readOnly?: boolean
   workspaceId?: string
   pageId?: string
+  blockId?: string
 }
 
 export default function QuoteBlock({
@@ -23,7 +24,8 @@ export default function QuoteBlock({
   onBlur,
   readOnly = false,
   workspaceId,
-  pageId
+  pageId,
+  blockId
 }: QuoteBlockProps) {
   const content = typeof block.content === 'string' 
     ? block.content 
@@ -44,6 +46,7 @@ export default function QuoteBlock({
       <MentionInput
         content={content}
         mentions={mentions}
+        blockId={blockId || block.id}
         onChange={handleChange}
         onKeyDown={onKeyDown}
         onFocus={onFocus}
diff --git a/components/editor/blocks/TextBlock.tsx b/components/editor/blocks/TextBlock.tsx
index bc3eda3..87a2089 100644
--- a/components/editor/blocks/TextBlock.tsx
+++ b/components/editor/blocks/TextBlock.tsx
@@ -16,6 +16,7 @@ interface TextBlockProps {
   className?: string
   workspaceId?: string
   pageId?: string
+  blockId?: string
 }
 
 export default function TextBlock({
@@ -28,7 +29,8 @@ export default function TextBlock({
   placeholder = "Type '/' for commands, '@' to mention",
   className,
   workspaceId,
-  pageId
+  pageId,
+  blockId
 }: TextBlockProps) {
   const content = typeof block.content === 'string' 
     ? block.content 
@@ -48,6 +50,7 @@ export default function TextBlock({
     <MentionInput
       content={content}
       mentions={mentions}
+      blockId={blockId || block.id}
       onChange={handleChange}
       onKeyDown={onKeyDown}
       onFocus={onFocus}
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/notion-sidebar.tsx
index 4372d08..c08f316 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/notion-sidebar.tsx
@@ -23,7 +23,6 @@ import {
   FileText,
   Hash,
   Calendar,
-  Inbox,
   File,
   Circle
 } from "lucide-react"
@@ -40,7 +39,6 @@ import { CreateWorkspaceModal } from "@/components/workspace/create-workspace-mo
 import { SearchDialog } from "@/components/search/SearchDialog"
 import { SettingsModal } from "@/components/settings/SettingsModal"
 import { AvatarUpload } from "@/components/ui/avatar-upload"
-import NotificationBell from "@/components/notifications/NotificationBell"
 import { cn } from "@/lib/utils"
 import toast from "react-hot-toast"
 
@@ -285,7 +283,6 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
           </DropdownMenu>
 
           <div className="flex items-center gap-1">
-            <NotificationBell />
             <Button
               variant="ghost"
               size="icon"
@@ -327,7 +324,6 @@ export function NotionSidebar({ user }: NotionSidebarProps) {
         {/* Main Navigation */}
         <ScrollArea className="flex-1 px-2">
           <div className="space-y-0.5 pb-2">
-            <SidebarItem icon={<Inbox />} label="Inbox" onClick={() => {}} />
             
             <SidebarItem 
               icon={<Trash2 />} 
diff --git a/components/page/notion-page-header.tsx b/components/page/notion-page-header.tsx
index 3de9541..6ec6905 100644
--- a/components/page/notion-page-header.tsx
+++ b/components/page/notion-page-header.tsx
@@ -34,12 +34,10 @@ import {
   Move,
   Plus,
   X,
-  Bell
 } from "lucide-react"
 import toast from "react-hot-toast"
 import { cn } from "@/lib/utils"
 import { ActiveUsers } from "@/components/collaboration/ActiveUsers"
-import { NotificationInbox } from "@/components/inbox/NotificationInbox"
 
 interface NotionPageHeaderProps {
   page: any
@@ -61,29 +59,8 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
   const [hoveredAddIcon, setHoveredAddIcon] = useState(false)
   const [hoveredAddCover, setHoveredAddCover] = useState(false)
   const [isFavorite, setIsFavorite] = useState(page.isFavorite || false)
-  const [showNotifications, setShowNotifications] = useState(false)
-  const [unreadCount, setUnreadCount] = useState(0)
   const [editedTime, setEditedTime] = useState("")
 
-  // Fetch unread notifications count
-  useEffect(() => {
-    const fetchUnreadCount = async () => {
-      try {
-        const response = await fetch('/api/notifications?unread=true')
-        if (response.ok) {
-          const data = await response.json()
-          setUnreadCount(data.unreadCount || 0)
-        }
-      } catch (error) {
-        console.error('Error fetching unread count:', error)
-      }
-    }
-    
-    fetchUnreadCount()
-    // Refresh every 30 seconds
-    const interval = setInterval(fetchUnreadCount, 30000)
-    return () => clearInterval(interval)
-  }, [])
 
   // Format the edited time
   const formatEditedTime = (date: string | Date) => {
@@ -347,7 +324,12 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
 
           {/* Top Bar Actions */}
           <div className="flex items-center justify-between gap-2 py-2 text-sm text-[#37352f80]">
-            <ActiveUsers />
+            {/* Left side - Active Users */}
+            <div className="flex items-center gap-2">
+              <ActiveUsers />
+            </div>
+            
+            {/* Right side - Actions */}
             <div className="flex items-center gap-2">
               <div className="flex items-center gap-1 px-2 py-1">
                 <span className="text-[#37352f80]">Edited</span>
@@ -356,62 +338,47 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
               <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
                 Share
               </button>
-            <button 
-              className="hover:bg-[#37352f0a] px-2 py-1 rounded relative"
-              onClick={() => {
-                console.log('Opening notifications...')
-                setShowNotifications(true)
-              }}
-              title="Notifications"
-            >
-              <Bell className="h-4 w-4" />
-              {unreadCount > 0 && (
-                <span className="absolute -top-0.5 -right-0.5 h-4 w-4 bg-red-500 text-white text-[10px] font-medium rounded-full flex items-center justify-center">
-                  {unreadCount > 9 ? '9+' : unreadCount}
-                </span>
-              )}
-            </button>
-            <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
-              <MessageSquare className="h-4 w-4" />
-            </button>
-            <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
-              <Clock className="h-4 w-4" />
-            </button>
-            <button 
-              className="hover:bg-[#37352f0a] px-2 py-1 rounded"
-              onClick={handleToggleFavorite}
-              title={isFavorite ? "Remove from favorites" : "Add to favorites"}
-            >
-              <Star className={cn(
-                "h-4 w-4",
-                isFavorite && "fill-yellow-500 text-yellow-500"
-              )} />
-            </button>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button className="hover:bg-[#37352f0a] p-1 rounded">
-                  <MoreHorizontal className="h-4 w-4" />
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem>
-                  <Copy className="h-4 w-4 mr-2" />
-                  Duplicate
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Move className="h-4 w-4 mr-2" />
-                  Move to
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem 
-                  onClick={() => setShowDeleteDialog(true)}
-                  className="text-red-600 dark:text-red-400"
-                >
-                  <Trash2 className="h-4 w-4 mr-2" />
-                  Move to trash
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+              <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
+                <MessageSquare className="h-4 w-4" />
+              </button>
+              <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
+                <Clock className="h-4 w-4" />
+              </button>
+              <button 
+                className="hover:bg-[#37352f0a] px-2 py-1 rounded"
+                onClick={handleToggleFavorite}
+                title={isFavorite ? "Remove from favorites" : "Add to favorites"}
+              >
+                <Star className={cn(
+                  "h-4 w-4",
+                  isFavorite && "fill-yellow-500 text-yellow-500"
+                )} />
+              </button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button className="hover:bg-[#37352f0a] p-1 rounded">
+                    <MoreHorizontal className="h-4 w-4" />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem>
+                    <Copy className="h-4 w-4 mr-2" />
+                    Duplicate
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Move className="h-4 w-4 mr-2" />
+                    Move to
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem 
+                    onClick={() => setShowDeleteDialog(true)}
+                    className="text-red-600 dark:text-red-400"
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Move to trash
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </div>
           </div>
         </div>
@@ -484,25 +451,6 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
           </AlertDialogContent>
         </AlertDialog>
 
-      {/* Notification Inbox */}
-      <NotificationInbox 
-        isOpen={showNotifications} 
-        onClose={() => {
-          setShowNotifications(false)
-          // Refresh unread count after closing
-          setTimeout(async () => {
-            try {
-              const response = await fetch('/api/notifications?unread=true')
-              if (response.ok) {
-                const data = await response.json()
-                setUnreadCount(data.unreadCount || 0)
-              }
-            } catch (error) {
-              console.error('Error fetching unread count:', error)
-            }
-          }, 500)
-        }} 
-      />
     </>
   )
 }
\ No newline at end of file
diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
index 0333f16..c3d299e 100644
--- a/components/settings/SettingsModal.tsx
+++ b/components/settings/SettingsModal.tsx
@@ -779,7 +779,9 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
       const response = await fetch(`/api/workspaces/${workspaceId}/members`)
       if (response.ok) {
         const data = await response.json()
-        setMembers(data)
+        // Ensure we're getting an array - handle both { members: [...] } and direct array responses
+        const membersList = Array.isArray(data) ? data : (data.members || [])
+        setMembers(membersList)
       } else {
         // Fallback to current user only
         setMembers([
@@ -836,12 +838,12 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
         <div className="flex items-center justify-between mb-4">
           <Label className="text-sm font-medium">Workspace members</Label>
           <span className="text-sm text-gray-500 dark:text-gray-400">
-            {members.length} {members.length === 1 ? 'member' : 'members'}
+            {Array.isArray(members) ? members.length : 0} {members?.length === 1 ? 'member' : 'members'}
           </span>
         </div>
 
         <div className="space-y-2">
-          {members.map((member) => (
+          {Array.isArray(members) && members.map((member) => (
             <div 
               key={member.id}
               className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900"
diff --git a/lib/collaboration/ot.ts b/lib/collaboration/ot.ts
new file mode 100644
index 0000000..af90e4f
--- /dev/null
+++ b/lib/collaboration/ot.ts
@@ -0,0 +1,361 @@
+/**
+ * Operational Transformation (OT) implementation for collaborative editing
+ * This handles conflict resolution when multiple users edit the same content simultaneously
+ */
+
+export interface Operation {
+  type: 'insert' | 'delete' | 'retain'
+  position: number
+  content?: string
+  length?: number
+  userId: string
+  timestamp: number
+}
+
+export interface Transform {
+  op1: Operation
+  op2: Operation
+}
+
+/**
+ * Transform two operations to handle concurrent edits
+ * Returns transformed operations that can be applied in any order
+ */
+export function transformOperations(op1: Operation, op2: Operation): Transform {
+  // op1 is the operation from the local user
+  // op2 is the operation from the remote user
+  
+  if (op1.type === 'retain' || op2.type === 'retain') {
+    // No transformation needed for retain operations
+    return { op1, op2 }
+  }
+  
+  // Both are inserts
+  if (op1.type === 'insert' && op2.type === 'insert') {
+    if (op1.position < op2.position) {
+      // op1 comes before op2, shift op2's position
+      return {
+        op1,
+        op2: {
+          ...op2,
+          position: op2.position + (op1.content?.length || 0)
+        }
+      }
+    } else if (op1.position > op2.position) {
+      // op2 comes before op1, shift op1's position
+      return {
+        op1: {
+          ...op1,
+          position: op1.position + (op2.content?.length || 0)
+        },
+        op2
+      }
+    } else {
+      // Same position - use timestamp or userId to determine order
+      if (op1.timestamp < op2.timestamp || 
+          (op1.timestamp === op2.timestamp && op1.userId < op2.userId)) {
+        return {
+          op1,
+          op2: {
+            ...op2,
+            position: op2.position + (op1.content?.length || 0)
+          }
+        }
+      } else {
+        return {
+          op1: {
+            ...op1,
+            position: op1.position + (op2.content?.length || 0)
+          },
+          op2
+        }
+      }
+    }
+  }
+  
+  // Both are deletes
+  if (op1.type === 'delete' && op2.type === 'delete') {
+    const op1End = op1.position + (op1.length || 0)
+    const op2End = op2.position + (op2.length || 0)
+    
+    if (op1End <= op2.position) {
+      // op1 is before op2, shift op2's position
+      return {
+        op1,
+        op2: {
+          ...op2,
+          position: op2.position - (op1.length || 0)
+        }
+      }
+    } else if (op2End <= op1.position) {
+      // op2 is before op1, shift op1's position
+      return {
+        op1: {
+          ...op1,
+          position: op1.position - (op2.length || 0)
+        },
+        op2
+      }
+    } else {
+      // Overlapping deletes - need to handle carefully
+      const overlapStart = Math.max(op1.position, op2.position)
+      const overlapEnd = Math.min(op1End, op2End)
+      const overlapLength = overlapEnd - overlapStart
+      
+      if (op1.position < op2.position) {
+        return {
+          op1: {
+            ...op1,
+            length: (op1.length || 0) - overlapLength
+          },
+          op2: {
+            ...op2,
+            position: op1.position,
+            length: (op2.length || 0) - overlapLength
+          }
+        }
+      } else {
+        return {
+          op1: {
+            ...op1,
+            position: op2.position,
+            length: (op1.length || 0) - overlapLength
+          },
+          op2: {
+            ...op2,
+            length: (op2.length || 0) - overlapLength
+          }
+        }
+      }
+    }
+  }
+  
+  // Insert and delete
+  if (op1.type === 'insert' && op2.type === 'delete') {
+    const op2End = op2.position + (op2.length || 0)
+    
+    if (op1.position <= op2.position) {
+      // Insert before delete
+      return {
+        op1,
+        op2: {
+          ...op2,
+          position: op2.position + (op1.content?.length || 0)
+        }
+      }
+    } else if (op1.position >= op2End) {
+      // Insert after delete
+      return {
+        op1: {
+          ...op1,
+          position: op1.position - (op2.length || 0)
+        },
+        op2
+      }
+    } else {
+      // Insert within delete range
+      return {
+        op1: {
+          ...op1,
+          position: op2.position
+        },
+        op2: {
+          ...op2,
+          length: (op2.length || 0) + (op1.content?.length || 0)
+        }
+      }
+    }
+  }
+  
+  // Delete and insert
+  if (op1.type === 'delete' && op2.type === 'insert') {
+    const op1End = op1.position + (op1.length || 0)
+    
+    if (op2.position <= op1.position) {
+      // Insert before delete
+      return {
+        op1: {
+          ...op1,
+          position: op1.position + (op2.content?.length || 0)
+        },
+        op2
+      }
+    } else if (op2.position >= op1End) {
+      // Insert after delete
+      return {
+        op1,
+        op2: {
+          ...op2,
+          position: op2.position - (op1.length || 0)
+        }
+      }
+    } else {
+      // Insert within delete range
+      return {
+        op1: {
+          ...op1,
+          length: (op1.length || 0) + (op2.content?.length || 0)
+        },
+        op2: {
+          ...op2,
+          position: op1.position
+        }
+      }
+    }
+  }
+  
+  return { op1, op2 }
+}
+
+/**
+ * Apply an operation to a text string
+ */
+export function applyOperation(text: string, operation: Operation): string {
+  switch (operation.type) {
+    case 'insert':
+      return (
+        text.slice(0, operation.position) +
+        (operation.content || '') +
+        text.slice(operation.position)
+      )
+    
+    case 'delete':
+      return (
+        text.slice(0, operation.position) +
+        text.slice(operation.position + (operation.length || 0))
+      )
+    
+    case 'retain':
+      return text
+    
+    default:
+      return text
+  }
+}
+
+/**
+ * Compose multiple operations into a single operation
+ */
+export function composeOperations(ops: Operation[]): Operation[] {
+  if (ops.length === 0) return []
+  if (ops.length === 1) return ops
+  
+  const composed: Operation[] = []
+  let current = ops[0]
+  
+  for (let i = 1; i < ops.length; i++) {
+    const next = ops[i]
+    
+    // Try to merge consecutive operations of the same type
+    if (current.type === next.type && current.userId === next.userId) {
+      if (current.type === 'insert' && next.type === 'insert') {
+        if (current.position + (current.content?.length || 0) === next.position) {
+          // Merge consecutive inserts
+          current = {
+            ...current,
+            content: (current.content || '') + (next.content || '')
+          }
+          continue
+        }
+      } else if (current.type === 'delete' && next.type === 'delete') {
+        if (current.position === next.position) {
+          // Merge consecutive deletes at same position
+          current = {
+            ...current,
+            length: (current.length || 0) + (next.length || 0)
+          }
+          continue
+        }
+      }
+    }
+    
+    composed.push(current)
+    current = next
+  }
+  
+  composed.push(current)
+  return composed
+}
+
+/**
+ * Create a diff between two text strings
+ */
+export function createDiff(oldText: string, newText: string, userId: string): Operation[] {
+  const operations: Operation[] = []
+  let oldIndex = 0
+  let newIndex = 0
+  
+  while (oldIndex < oldText.length || newIndex < newText.length) {
+    if (oldIndex >= oldText.length) {
+      // Remaining characters in new text are insertions
+      operations.push({
+        type: 'insert',
+        position: oldIndex,
+        content: newText.slice(newIndex),
+        userId,
+        timestamp: Date.now()
+      })
+      break
+    }
+    
+    if (newIndex >= newText.length) {
+      // Remaining characters in old text are deletions
+      operations.push({
+        type: 'delete',
+        position: newIndex,
+        length: oldText.length - oldIndex,
+        userId,
+        timestamp: Date.now()
+      })
+      break
+    }
+    
+    if (oldText[oldIndex] === newText[newIndex]) {
+      // Characters match, move forward
+      oldIndex++
+      newIndex++
+    } else {
+      // Find the extent of the difference
+      let deleteLength = 0
+      let insertContent = ''
+      
+      // Find deletion extent
+      let tempOld = oldIndex
+      while (tempOld < oldText.length && oldText[tempOld] !== newText[newIndex]) {
+        deleteLength++
+        tempOld++
+      }
+      
+      // Find insertion extent
+      let tempNew = newIndex
+      while (tempNew < newText.length && newText[tempNew] !== oldText[oldIndex]) {
+        insertContent += newText[tempNew]
+        tempNew++
+      }
+      
+      if (deleteLength > 0) {
+        operations.push({
+          type: 'delete',
+          position: newIndex,
+          length: deleteLength,
+          userId,
+          timestamp: Date.now()
+        })
+        oldIndex += deleteLength
+      }
+      
+      if (insertContent.length > 0) {
+        operations.push({
+          type: 'insert',
+          position: oldIndex,
+          content: insertContent,
+          userId,
+          timestamp: Date.now()
+        })
+        newIndex += insertContent.length
+      }
+    }
+  }
+  
+  return composeOperations(operations)
+}
\ No newline at end of file
diff --git a/lib/socket/client.tsx b/lib/socket/client.tsx
index 2fc554c..6cb9e98 100644
--- a/lib/socket/client.tsx
+++ b/lib/socket/client.tsx
@@ -19,9 +19,10 @@ interface SocketContextType {
   sendBlockBlur: (pageId: string, blockId: string, userId: string) => void
   sendContentSync: (pageId: string, blocks: any[], userId: string) => void
   sendCursorPosition: (pageId: string, position: { x: number; y: number }) => void
-  sendSelection: (pageId: string, selection: { start: number; end: number } | null) => void
+  sendSelection: (pageId: string, selection: { start: number; end: number } | null, blockId?: string) => void
   sendTypingStart: (pageId: string, blockId: string) => void
   sendTypingStop: (pageId: string, blockId: string) => void
+  sendUserMentioned: (mentionedUserId: string, pageId: string, blockId: string, mentionedBy: any) => void
   onBlockUpdate?: (callback: (data: any) => void) => void
   onBlockAdd?: (callback: (data: any) => void) => void
   onBlockDelete?: (callback: (data: any) => void) => void
@@ -29,6 +30,10 @@ interface SocketContextType {
   onBlockFocus?: (callback: (data: any) => void) => void
   onBlockBlur?: (callback: (data: any) => void) => void
   onContentSync?: (callback: (data: any) => void) => void
+  onCursorMove?: (callback: (data: any) => void) => void
+  onSelectionChange?: (callback: (data: any) => void) => void
+  onUserTyping?: (callback: (data: any) => void) => void
+  onMentionNotification?: (callback: (data: any) => void) => void
 }
 
 const SocketContext = createContext<SocketContextType>({
@@ -49,6 +54,7 @@ const SocketContext = createContext<SocketContextType>({
   sendSelection: () => {},
   sendTypingStart: () => {},
   sendTypingStop: () => {},
+  sendUserMentioned: () => {},
   onBlockUpdate: () => {},
   onBlockAdd: () => {},
   onBlockDelete: () => {},
@@ -56,6 +62,10 @@ const SocketContext = createContext<SocketContextType>({
   onBlockFocus: () => {},
   onBlockBlur: () => {},
   onContentSync: () => {},
+  onCursorMove: () => {},
+  onSelectionChange: () => {},
+  onUserTyping: () => {},
+  onMentionNotification: () => {},
 })
 
 export function SocketProvider({ children }: { children: ReactNode }) {
@@ -315,9 +325,9 @@ export function SocketProvider({ children }: { children: ReactNode }) {
     }
   }, [socket])
 
-  const sendSelection = useCallback((pageId: string, selection: { start: number; end: number } | null) => {
+  const sendSelection = useCallback((pageId: string, selection: { start: number; end: number } | null, blockId?: string) => {
     if (socket && socket.connected) {
-      socket.emit('selection-change', { pageId, selection })
+      socket.emit('selection-change', { pageId, selection, blockId })
     }
   }, [socket])
 
@@ -332,6 +342,52 @@ export function SocketProvider({ children }: { children: ReactNode }) {
       socket.emit('typing-stop', { pageId, blockId })
     }
   }, [socket])
+  
+  const sendUserMentioned = useCallback((mentionedUserId: string, pageId: string, blockId: string, mentionedBy: any) => {
+    if (socket && socket.connected) {
+      socket.emit('user-mentioned', { mentionedUserId, pageId, blockId, mentionedBy })
+    }
+  }, [socket])
+  
+  // Register cursor move listener
+  const onCursorMove = useCallback((callback: (data: any) => void) => {
+    if (socket) {
+      socket.on('cursor-moved', callback)
+      return () => {
+        socket.off('cursor-moved', callback)
+      }
+    }
+  }, [socket])
+  
+  // Register selection change listener
+  const onSelectionChange = useCallback((callback: (data: any) => void) => {
+    if (socket) {
+      socket.on('selection-changed', callback)
+      return () => {
+        socket.off('selection-changed', callback)
+      }
+    }
+  }, [socket])
+  
+  // Register typing listener
+  const onUserTyping = useCallback((callback: (data: any) => void) => {
+    if (socket) {
+      socket.on('user-typing', callback)
+      return () => {
+        socket.off('user-typing', callback)
+      }
+    }
+  }, [socket])
+  
+  // Register mention notification listener
+  const onMentionNotification = useCallback((callback: (data: any) => void) => {
+    if (socket) {
+      socket.on('mention-notification', callback)
+      return () => {
+        socket.off('mention-notification', callback)
+      }
+    }
+  }, [socket])
 
   return (
     <SocketContext.Provider value={{
@@ -352,13 +408,18 @@ export function SocketProvider({ children }: { children: ReactNode }) {
       sendSelection,
       sendTypingStart,
       sendTypingStop,
+      sendUserMentioned,
       onBlockUpdate,
       onBlockAdd,
       onBlockDelete,
       onBlockReorder,
       onBlockFocus,
       onBlockBlur,
-      onContentSync
+      onContentSync,
+      onCursorMove,
+      onSelectionChange,
+      onUserTyping,
+      onMentionNotification
     }}>
       {children}
     </SocketContext.Provider>
diff --git a/lib/socket/server.ts b/lib/socket/server.ts
index 4432449..bf39341 100644
--- a/lib/socket/server.ts
+++ b/lib/socket/server.ts
@@ -81,7 +81,10 @@ class SocketServer {
         // Add user to room
         const room = this.pageRooms.get(roomId)!
         const userPresence: UserPresence = {
-          ...user,
+          userId: user.id,
+          name: user.name,
+          email: user.email,
+          avatarUrl: user.avatarUrl,
           color: this.getUserColor()
         }
         room.users.set(socket.id, userPresence)
diff --git a/server.js b/server.js
index 3d6834f..ea68840 100644
--- a/server.js
+++ b/server.js
@@ -192,6 +192,93 @@ app.prepare().then(() => {
       }
     })
     
+    // Handle cursor movement
+    socket.on('cursor-move', (data) => {
+      if (!currentRoom) return
+      
+      const room = pageRooms.get(currentRoom)
+      if (room && room.size > 1) {
+        const userInfo = room.get(currentUserId)
+        socket.to(currentRoom).emit('cursor-moved', {
+          userId: currentUserId,
+          userName: userInfo?.name || 'Anonymous',
+          userColor: userInfo?.color || '#4ECDC4',
+          position: data.position,
+          timestamp: new Date().toISOString()
+        })
+      }
+    })
+    
+    // Handle selection change
+    socket.on('selection-change', (data) => {
+      if (!currentRoom) return
+      
+      const room = pageRooms.get(currentRoom)
+      if (room && room.size > 1) {
+        const userInfo = room.get(currentUserId)
+        socket.to(currentRoom).emit('selection-changed', {
+          userId: currentUserId,
+          userName: userInfo?.name || 'Anonymous',
+          userColor: userInfo?.color || '#4ECDC4',
+          selection: data.selection,
+          blockId: data.blockId,
+          timestamp: new Date().toISOString()
+        })
+      }
+    })
+    
+    // Handle typing indicators
+    socket.on('typing-start', (data) => {
+      if (!currentRoom) return
+      
+      const room = pageRooms.get(currentRoom)
+      if (room && room.size > 1) {
+        const userInfo = room.get(currentUserId)
+        socket.to(currentRoom).emit('user-typing', {
+          userId: currentUserId,
+          userName: userInfo?.name || 'Anonymous',
+          blockId: data.blockId,
+          isTyping: true,
+          timestamp: new Date().toISOString()
+        })
+      }
+    })
+    
+    socket.on('typing-stop', (data) => {
+      if (!currentRoom) return
+      
+      const room = pageRooms.get(currentRoom)
+      if (room && room.size > 1) {
+        socket.to(currentRoom).emit('user-typing', {
+          userId: currentUserId,
+          blockId: data.blockId,
+          isTyping: false,
+          timestamp: new Date().toISOString()
+        })
+      }
+    })
+    
+    // Handle mentions
+    socket.on('user-mentioned', (data) => {
+      const { mentionedUserId, pageId, blockId, mentionedBy } = data
+      
+      // Send real-time notification to the mentioned user
+      // Find the socket of the mentioned user
+      for (const [roomId, room] of pageRooms.entries()) {
+        const mentionedUser = room.get(mentionedUserId)
+        if (mentionedUser) {
+          io.to(mentionedUser.socketId).emit('mention-notification', {
+            pageId,
+            blockId,
+            mentionedBy,
+            timestamp: new Date().toISOString()
+          })
+          console.log(`📢 Sent mention notification to ${mentionedUserId}`)
+          break
+        }
+      }
+    })
+    
     // Handle full content sync (periodic)
     socket.on('content-sync', (data) => {
       if (!currentRoom) return

From 13d4c71a70bfa4233084ae0cb7ac44efa418965c Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Mon, 25 Aug 2025 11:24:34 +0530
Subject: [PATCH 38/43] remove unused icons

---
 components/page/notion-page-header.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/components/page/notion-page-header.tsx b/components/page/notion-page-header.tsx
index 6ec6905..1917f64 100644
--- a/components/page/notion-page-header.tsx
+++ b/components/page/notion-page-header.tsx
@@ -22,8 +22,6 @@ import {
 } from "@/components/ui/alert-dialog"
 import { 
   MoreHorizontal,
-  MessageSquare,
-  Clock,
   Star,
   Smile,
   Image,
@@ -338,12 +336,6 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
               <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
                 Share
               </button>
-              <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
-                <MessageSquare className="h-4 w-4" />
-              </button>
-              <button className="hover:bg-[#37352f0a] px-2 py-1 rounded">
-                <Clock className="h-4 w-4" />
-              </button>
               <button 
                 className="hover:bg-[#37352f0a] px-2 py-1 rounded"
                 onClick={handleToggleFavorite}

From a95577c19c1325da49df50eecad45e61d7bed352 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Mon, 25 Aug 2025 11:26:47 +0530
Subject: [PATCH 39/43] comnig soon notification

---
 components/settings/SettingsModal.tsx | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
index c3d299e..8ec21a0 100644
--- a/components/settings/SettingsModal.tsx
+++ b/components/settings/SettingsModal.tsx
@@ -106,8 +106,8 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
   }
 
   const handleSaveNotifications = () => {
-    // Save notification preferences
-    toast.success('Notification preferences saved')
+    // Save notification preferences - coming soon
+    toast.info('Notification settings will be available soon!')
   }
 
   const handleUpdateWorkspace = async () => {
@@ -404,7 +404,20 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
       <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">My notifications</h2>
       <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">Choose how you want to be notified</p>
       
-      <div className="space-y-6">
+      {/* Coming Soon Badge */}
+      <div className="mb-6 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+        <div className="flex items-center gap-2">
+          <span className="text-yellow-600 dark:text-yellow-400">⚠️</span>
+          <p className="text-sm text-yellow-800 dark:text-yellow-300 font-medium">
+            Notification settings coming soon
+          </p>
+        </div>
+        <p className="text-xs text-yellow-700 dark:text-yellow-400 mt-1 ml-6">
+          We're working on bringing you customizable notification preferences. Stay tuned!
+        </p>
+      </div>
+      
+      <div className="space-y-6 opacity-50 pointer-events-none">
         <div className="space-y-4">
           <Label className="text-sm font-medium">Email notifications</Label>
           
@@ -494,8 +507,12 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
           </div>
         </div>
         
-        <Button onClick={handleSaveNotifications}>
-          Save preferences
+        <Button 
+          onClick={handleSaveNotifications}
+          disabled
+          className="cursor-not-allowed"
+        >
+          Save preferences (Coming Soon)
         </Button>
       </div>
     </div>

From d2fc549f15f1e9be24b0b35deb6d124f25b89b03 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Mon, 25 Aug 2025 11:49:08 +0530
Subject: [PATCH 40/43] setting fixed

---
 app/api/user/password/route.ts            | 102 +++++
 app/api/workspaces/[workspaceId]/route.ts |   3 +-
 components/page/notion-page-header.tsx    |   4 -
 components/settings/SettingsModal.tsx     | 482 +++++++++++++++++-----
 4 files changed, 480 insertions(+), 111 deletions(-)
 create mode 100644 app/api/user/password/route.ts

diff --git a/app/api/user/password/route.ts b/app/api/user/password/route.ts
new file mode 100644
index 0000000..e2cb26c
--- /dev/null
+++ b/app/api/user/password/route.ts
@@ -0,0 +1,102 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/app/api/auth/[...nextauth]/auth'
+import { prisma } from '@/lib/db/prisma'
+import bcrypt from 'bcryptjs'
+import { z } from 'zod'
+
+const passwordChangeSchema = z.object({
+  currentPassword: z.string().min(1, 'Current password is required'),
+  newPassword: z.string().min(8, 'Password must be at least 8 characters'),
+  confirmPassword: z.string()
+}).refine((data) => data.newPassword === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ["confirmPassword"],
+})
+
+export async function POST(req: NextRequest) {
+  try {
+    const session = await getServerSession(authOptions)
+    
+    if (!session?.user?.email) {
+      return NextResponse.json(
+        { error: 'Unauthorized' },
+        { status: 401 }
+      )
+    }
+
+    const body = await req.json()
+    
+    // Validate input
+    const validationResult = passwordChangeSchema.safeParse(body)
+    if (!validationResult.success) {
+      return NextResponse.json(
+        { error: validationResult.error.errors[0].message },
+        { status: 400 }
+      )
+    }
+
+    const { currentPassword, newPassword } = validationResult.data
+
+    // Get user with password
+    const user = await prisma.user.findUnique({
+      where: { email: session.user.email },
+      select: { id: true, password: true }
+    })
+
+    if (!user) {
+      return NextResponse.json(
+        { error: 'User not found' },
+        { status: 404 }
+      )
+    }
+
+    // Check if user has a password (might be OAuth user)
+    if (!user.password) {
+      return NextResponse.json(
+        { error: 'Password cannot be changed for OAuth accounts' },
+        { status: 400 }
+      )
+    }
+
+    // Verify current password
+    const isValidPassword = await bcrypt.compare(currentPassword, user.password)
+    if (!isValidPassword) {
+      return NextResponse.json(
+        { error: 'Current password is incorrect' },
+        { status: 400 }
+      )
+    }
+
+    // Check if new password is different from current
+    if (currentPassword === newPassword) {
+      return NextResponse.json(
+        { error: 'New password must be different from current password' },
+        { status: 400 }
+      )
+    }
+
+    // Hash new password
+    const hashedPassword = await bcrypt.hash(newPassword, 10)
+
+    // Update password
+    await prisma.user.update({
+      where: { id: user.id },
+      data: { 
+        password: hashedPassword,
+        updatedAt: new Date()
+      }
+    })
+
+    return NextResponse.json(
+      { message: 'Password changed successfully' },
+      { status: 200 }
+    )
+  } catch (error) {
+    console.error('Password change error:', error)
+    return NextResponse.json(
+      { error: 'Failed to change password' },
+      { status: 500 }
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/api/workspaces/[workspaceId]/route.ts b/app/api/workspaces/[workspaceId]/route.ts
index 33f054c..a559c24 100644
--- a/app/api/workspaces/[workspaceId]/route.ts
+++ b/app/api/workspaces/[workspaceId]/route.ts
@@ -78,7 +78,7 @@ export async function PATCH(
     }
 
     const body = await request.json()
-    const { name, description, icon } = body
+    const { name, icon } = body
 
     // Check if user is admin or owner
     const workspaceMember = await prisma.workspaceMember.findUnique({
@@ -102,7 +102,6 @@ export async function PATCH(
       where: { id: workspaceId },
       data: {
         ...(name && { name }),
-        ...(description !== undefined && { description }),
         ...(icon !== undefined && { icon })
       }
     })
diff --git a/components/page/notion-page-header.tsx b/components/page/notion-page-header.tsx
index 1917f64..35ba7af 100644
--- a/components/page/notion-page-header.tsx
+++ b/components/page/notion-page-header.tsx
@@ -295,10 +295,6 @@ export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHead
                   </DropdownMenuContent>
                 </DropdownMenu>
               )}
-              <button className="text-sm text-[#37352f80] hover:bg-[#37352f0a] px-3 py-1 rounded">
-                <MessageSquare className="inline h-4 w-4 mr-1.5" />
-                Add comment
-              </button>
             </div>
           )}
 
diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
index 8ec21a0..8e8a144 100644
--- a/components/settings/SettingsModal.tsx
+++ b/components/settings/SettingsModal.tsx
@@ -16,7 +16,6 @@ import {
   Shield, 
   Palette, 
   Users, 
-  CreditCard,
   Settings,
   LogOut,
   Loader2,
@@ -44,7 +43,6 @@ type SettingsSection =
   | 'security' 
   | 'appearance'
   | 'workspace'
-  | 'billing'
   | 'members'
 
 export function SettingsModal({ open, onOpenChange, user, workspaceId }: SettingsModalProps) {
@@ -76,11 +74,16 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
 
   // Workspace settings state
   const [workspaceName, setWorkspaceName] = useState('My Workspace')
-  const [workspaceUrl, setWorkspaceUrl] = useState('my-workspace')
-  const [description, setDescription] = useState('')
   const [members, setMembers] = useState<any[]>([])
   const [inviteEmail, setInviteEmail] = useState('')
   const [currentWorkspace, setCurrentWorkspace] = useState<any>(null)
+  
+  // Security settings state
+  const [showPasswordChange, setShowPasswordChange] = useState(false)
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [passwordError, setPasswordError] = useState('')
 
   const handleUpdateProfile = async () => {
     setIsLoading(true)
@@ -109,6 +112,64 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
     // Save notification preferences - coming soon
     toast.info('Notification settings will be available soon!')
   }
+  
+  const handleChangePassword = async () => {
+    // Reset errors
+    setPasswordError('')
+    
+    // Validate passwords
+    if (!currentPassword || !newPassword || !confirmPassword) {
+      setPasswordError('All fields are required')
+      return
+    }
+    
+    if (newPassword.length < 8) {
+      setPasswordError('New password must be at least 8 characters')
+      return
+    }
+    
+    if (newPassword !== confirmPassword) {
+      setPasswordError('Passwords do not match')
+      return
+    }
+    
+    if (currentPassword === newPassword) {
+      setPasswordError('New password must be different from current password')
+      return
+    }
+    
+    setIsLoading(true)
+    try {
+      const response = await fetch('/api/user/password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          currentPassword,
+          newPassword,
+          confirmPassword
+        })
+      })
+      
+      const data = await response.json()
+      
+      if (!response.ok) {
+        setPasswordError(data.error || 'Failed to change password')
+        return
+      }
+      
+      toast.success('Password changed successfully')
+      // Reset form
+      setCurrentPassword('')
+      setNewPassword('')
+      setConfirmPassword('')
+      setShowPasswordChange(false)
+    } catch (error) {
+      console.error('Error changing password:', error)
+      setPasswordError('Failed to change password')
+    } finally {
+      setIsLoading(false)
+    }
+  }
 
   const handleUpdateWorkspace = async () => {
     if (!workspaceId) {
@@ -122,8 +183,7 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ 
-          name: workspaceName,
-          description 
+          name: workspaceName
         })
       })
 
@@ -141,17 +201,18 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
     }
   }
 
-  // Fetch workspace details when modal opens
+  // Fetch workspace details when modal opens or section changes
   useEffect(() => {
     const fetchWorkspace = async () => {
       if (!workspaceId || !open) return
+      if (currentSection !== 'workspace' && currentSection !== 'members') return
 
       try {
         const response = await fetch(`/api/workspaces/${workspaceId}`)
         if (response.ok) {
           const data = await response.json()
+          console.log('Fetched workspace data:', data) // Debug log
           setWorkspaceName(data.name || 'My Workspace')
-          setDescription(data.description || '')
           setCurrentWorkspace(data)
         }
       } catch (error) {
@@ -160,7 +221,7 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
     }
 
     fetchWorkspace()
-  }, [workspaceId, open])
+  }, [workspaceId, open, currentSection])
 
   const handleDeleteAccount = async () => {
     if (!confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
@@ -279,19 +340,6 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
             <span>Settings</span>
           </button>
           
-          <button
-            onClick={() => setCurrentSection('billing')}
-            className={cn(
-              "w-full px-3 py-2 text-sm text-left rounded-md flex items-center gap-3 transition-all",
-              currentSection === 'billing' 
-                ? "bg-white dark:bg-gray-800 shadow-sm text-gray-900 dark:text-white font-medium" 
-                : "hover:bg-gray-100 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-300"
-            )}
-          >
-            <CreditCard className="h-4 w-4 flex-shrink-0" />
-            <span>Billing</span>
-          </button>
-          
           <button
             onClick={() => setCurrentSection('members')}
             className={cn(
@@ -523,7 +571,20 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
       <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Appearance</h2>
       <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">Customize how the app looks and feels</p>
       
-      <div className="space-y-6">
+      {/* Coming Soon Badge */}
+      <div className="mb-6 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+        <div className="flex items-center gap-2">
+          <span className="text-yellow-600 dark:text-yellow-400">⚠️</span>
+          <p className="text-sm text-yellow-800 dark:text-yellow-300 font-medium">
+            Appearance settings coming soon
+          </p>
+        </div>
+        <p className="text-xs text-yellow-700 dark:text-yellow-400 mt-1 ml-6">
+          Theme customization, font settings, and more appearance options will be available soon!
+        </p>
+      </div>
+      
+      <div className="space-y-6 opacity-50 pointer-events-none">
         <div className="space-y-4">
           <Label className="text-sm font-medium">Theme</Label>
           <p className="text-sm text-gray-500 dark:text-gray-400">
@@ -568,97 +629,288 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
             </button>
           </div>
         </div>
-      </div>
-    </div>
-  )
-
-  const renderWorkspaceSettings = () => (
-    <div className="p-8 max-w-3xl">
-      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Workspace settings</h2>
-      <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">Configure your workspace details and preferences</p>
-      
-      <div className="space-y-6">
+        
+        <Separator />
+        
+        {/* Font Settings - Coming Soon */}
         <div className="space-y-4">
-          <div className="grid gap-2">
-            <Label htmlFor="workspace-name">Workspace name</Label>
-            <Input
-              id="workspace-name"
-              value={workspaceName}
-              onChange={(e) => setWorkspaceName(e.target.value)}
-              placeholder="Enter workspace name"
-            />
+          <div>
+            <Label className="text-sm font-medium">Font</Label>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              Customize your reading experience
+            </p>
           </div>
           
-          <div className="grid gap-2">
-            <Label htmlFor="workspace-url">Workspace URL</Label>
-            <div className="flex items-center gap-2">
-              <span className="text-sm text-gray-500">notion-clone.com/</span>
-              <Input
-                id="workspace-url"
-                value={workspaceUrl}
-                onChange={(e) => setWorkspaceUrl(e.target.value.toLowerCase().replace(/\s+/g, '-'))}
-                placeholder="workspace-url"
-                className="flex-1"
-              />
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm">Font family</span>
+              <select 
+                className="text-sm px-3 py-1 border rounded-md bg-white dark:bg-gray-800 disabled:opacity-50" 
+                disabled
+              >
+                <option>Default</option>
+                <option>Serif</option>
+                <option>Mono</option>
+              </select>
+            </div>
+            
+            <div className="flex items-center justify-between">
+              <span className="text-sm">Font size</span>
+              <select 
+                className="text-sm px-3 py-1 border rounded-md bg-white dark:bg-gray-800 disabled:opacity-50" 
+                disabled
+              >
+                <option>Small</option>
+                <option>Medium</option>
+                <option>Large</option>
+              </select>
             </div>
           </div>
+        </div>
+        
+        <Separator />
+        
+        {/* Page Width - Coming Soon */}
+        <div className="space-y-4">
+          <div>
+            <Label className="text-sm font-medium">Page width</Label>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              Choose your preferred page width
+            </p>
+          </div>
           
-          <div className="grid gap-2">
-            <Label htmlFor="description">Description</Label>
-            <Textarea
-              id="description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="What's your workspace about?"
-              rows={3}
-            />
+          <div className="flex items-center justify-between">
+            <span className="text-sm">Full width pages</span>
+            <Switch disabled />
           </div>
         </div>
         
-        <Button onClick={handleUpdateWorkspace} disabled={isLoading}>
-          {isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
-          Update workspace
-        </Button>
-        
         <Separator />
         
+        {/* Accent Color - Coming Soon */}
         <div className="space-y-4">
           <div>
-            <h3 className="text-sm font-medium">Export data</h3>
+            <Label className="text-sm font-medium">Accent color</Label>
             <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-              Download all your workspace data
+              Personalize with your favorite color
             </p>
           </div>
           
-          <Button variant="outline" size="sm">
-            Export all workspace data
-          </Button>
+          <div className="flex gap-2">
+            {['#3B82F6', '#10B981', '#8B5CF6', '#F59E0B', '#EF4444', '#EC4899'].map((color) => (
+              <button
+                key={color}
+                className="w-8 h-8 rounded-full border-2 border-gray-300 dark:border-gray-700 disabled:opacity-50"
+                style={{ backgroundColor: color }}
+                disabled
+              />
+            ))}
+          </div>
         </div>
       </div>
     </div>
   )
 
+  const renderWorkspaceSettings = () => (
+    <div className="p-8 max-w-3xl">
+      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Workspace settings</h2>
+      <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">Configure your workspace details and preferences</p>
+      
+      {!currentWorkspace ? (
+        <div className="text-sm text-gray-500">Loading workspace details...</div>
+      ) : (
+        <div className="space-y-6">
+          <div className="space-y-4">
+            <div className="grid gap-2">
+              <Label htmlFor="workspace-name">Workspace name</Label>
+              <Input
+                id="workspace-name"
+                value={workspaceName}
+                onChange={(e) => setWorkspaceName(e.target.value)}
+                placeholder="Enter workspace name"
+              />
+            </div>
+            
+            <div className="grid gap-2">
+              <Label htmlFor="workspace-slug">Workspace URL</Label>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Input
+                    id="workspace-slug"
+                    value={workspaceId ? `${window.location.origin}/workspace/${workspaceId}` : 'Loading...'}
+                    disabled
+                    className="flex-1 disabled:opacity-70 font-mono text-sm"
+                    title="Workspace URL"
+                  />
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      if (workspaceId) {
+                        navigator.clipboard.writeText(`${window.location.origin}/workspace/${workspaceId}`)
+                        toast.success('URL copied to clipboard')
+                      }
+                    }}
+                    disabled={!workspaceId}
+                  >
+                    Copy
+                  </Button>
+                </div>
+                <p className="text-xs text-gray-500">
+                  Workspace slug: <span className="font-mono">{currentWorkspace?.slug || 'N/A'}</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          
+          <Button onClick={handleUpdateWorkspace} disabled={isLoading}>
+            {isLoading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+            Save changes
+          </Button>
+          
+          <Separator />
+          
+          {/* Export Data - Coming Soon */}
+          <div className="space-y-4">
+            <div>
+              <h3 className="text-sm font-medium">Export data</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                Download all your workspace data
+              </p>
+            </div>
+            
+            <div className="flex items-center gap-3">
+              <Button 
+                variant="outline" 
+                size="sm"
+                disabled
+                className="cursor-not-allowed"
+              >
+                Export all workspace data
+              </Button>
+              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+                Coming Soon
+              </span>
+            </div>
+          </div>
+          
+          <Separator />
+          
+          {/* Danger Zone */}
+          <div className="space-y-4">
+            <div>
+              <h3 className="text-sm font-medium text-red-600 dark:text-red-400">Danger zone</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                Irreversible and destructive actions
+              </p>
+            </div>
+            
+            <Button 
+              variant="outline" 
+              size="sm"
+              className="border-red-300 text-red-600 hover:bg-red-50 dark:border-red-800 dark:text-red-400 dark:hover:bg-red-950"
+              disabled
+              title="Only workspace owners can delete workspaces"
+            >
+              Delete workspace
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+
   const renderSecuritySettings = () => (
     <div className="p-8 max-w-3xl">
       <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Security</h2>
       <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">Keep your account secure</p>
       
       <div className="space-y-6">
+        {/* Password Change Section */}
         <div className="space-y-4">
           <div>
             <h3 className="text-sm font-medium">Password</h3>
             <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-              Change your password
+              Change your password regularly to keep your account secure
             </p>
           </div>
           
-          <Button variant="outline" size="sm">
-            Change password
-          </Button>
+          {!showPasswordChange ? (
+            <Button 
+              variant="outline" 
+              size="sm"
+              onClick={() => setShowPasswordChange(true)}
+            >
+              Change password
+            </Button>
+          ) : (
+            <div className="space-y-4 p-4 border border-gray-200 dark:border-gray-800 rounded-lg">
+              <div className="space-y-2">
+                <Label htmlFor="current-password">Current password</Label>
+                <Input
+                  id="current-password"
+                  type="password"
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  placeholder="Enter current password"
+                />
+              </div>
+              
+              <div className="space-y-2">
+                <Label htmlFor="new-password">New password</Label>
+                <Input
+                  id="new-password"
+                  type="password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  placeholder="At least 8 characters"
+                />
+              </div>
+              
+              <div className="space-y-2">
+                <Label htmlFor="confirm-password">Confirm new password</Label>
+                <Input
+                  id="confirm-password"
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  placeholder="Re-enter new password"
+                />
+              </div>
+              
+              {passwordError && (
+                <div className="text-sm text-red-600 dark:text-red-400">
+                  {passwordError}
+                </div>
+              )}
+              
+              <div className="flex gap-2">
+                <Button 
+                  onClick={handleChangePassword}
+                  disabled={isLoading}
+                >
+                  {isLoading ? 'Changing...' : 'Change password'}
+                </Button>
+                <Button 
+                  variant="outline"
+                  onClick={() => {
+                    setShowPasswordChange(false)
+                    setCurrentPassword('')
+                    setNewPassword('')
+                    setConfirmPassword('')
+                    setPasswordError('')
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          )}
         </div>
         
         <Separator />
         
+        {/* 2FA Section - Coming Soon */}
         <div className="space-y-4">
           <div>
             <h3 className="text-sm font-medium">Two-factor authentication</h3>
@@ -667,35 +919,52 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
             </p>
           </div>
           
-          <Button variant="outline" size="sm">
-            Enable 2FA
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-
-  const renderBillingSettings = () => (
-    <div className="p-8 max-w-3xl">
-      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Billing</h2>
-      <p className="text-sm text-gray-500 dark:text-gray-400 mb-8">Manage your subscription and billing</p>
-      
-      <div className="space-y-6">
-        <div className="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
-          <h3 className="text-sm font-medium mb-2">Current plan</h3>
-          <p className="text-2xl font-semibold">Free</p>
-          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-            For personal use
-          </p>
+          {/* Coming Soon Badge for 2FA */}
+          <div className="flex items-center gap-3">
+            <Button 
+              variant="outline" 
+              size="sm"
+              disabled
+              className="cursor-not-allowed"
+            >
+              Enable 2FA
+            </Button>
+            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+              Coming Soon
+            </span>
+          </div>
         </div>
         
-        <Button className="w-full">
-          Upgrade to Pro
-        </Button>
+        <Separator />
+        
+        {/* Login Sessions - Coming Soon */}
+        <div className="space-y-4">
+          <div>
+            <h3 className="text-sm font-medium">Active sessions</h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              Manage your active login sessions
+            </p>
+          </div>
+          
+          <div className="flex items-center gap-3">
+            <Button 
+              variant="outline" 
+              size="sm"
+              disabled
+              className="cursor-not-allowed"
+            >
+              View sessions
+            </Button>
+            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+              Coming Soon
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   )
 
+
   const handleInviteMember = async () => {
     if (!inviteEmail || !inviteEmail.includes('@')) {
       toast.error('Please enter a valid email address')
@@ -916,9 +1185,14 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
       
       <div className="space-y-6">
         <div>
-          <h3 className="text-sm font-medium mb-4">Workspace permissions</h3>
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-sm font-medium">Workspace permissions</h3>
+            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+              Coming Soon
+            </span>
+          </div>
           
-          <div className="space-y-3">
+          <div className="space-y-3 opacity-50 pointer-events-none">
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm font-medium">Allow members to invite</p>
@@ -926,7 +1200,7 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
                   Members can invite new people to the workspace
                 </p>
               </div>
-              <Switch />
+              <Switch disabled />
             </div>
             
             <div className="flex items-center justify-between">
@@ -936,7 +1210,7 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
                   Invite external users with limited access
                 </p>
               </div>
-              <Switch />
+              <Switch disabled />
             </div>
             
             <div className="flex items-center justify-between">
@@ -946,7 +1220,7 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
                   New members need admin approval to join
                 </p>
               </div>
-              <Switch />
+              <Switch disabled />
             </div>
           </div>
         </div>
@@ -966,8 +1240,6 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
         return renderWorkspaceSettings()
       case 'security':
         return renderSecuritySettings()
-      case 'billing':
-        return renderBillingSettings()
       case 'members':
         return renderMembersSettings()
       default:

From 8b1ec8ba43fb4ebf0f3344d45ef32e67a2cceef1 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Mon, 25 Aug 2025 12:21:26 +0530
Subject: [PATCH 41/43] reomved not used keywords

---
 .env.example                                  |  6 ++---
 AUTH_SETUP.md                                 |  4 ++--
 CLAUDE.md                                     |  4 ++--
 FEATURES.md                                   | 10 ++++----
 README.md                                     | 24 +++++++++----------
 app/(protected)/dashboard/page.tsx            |  2 +-
 app/(protected)/layout.tsx                    |  4 ++--
 .../page/[pageId]/PageEditor.tsx              |  4 ++--
 .../page/[pageId]/PageEditorV2.tsx            | 16 ++++++-------
 app/demo/page.tsx                             |  4 ++--
 app/globals.css                               |  4 ++--
 app/layout.tsx                                |  4 ++--
 app/login/page.tsx                            |  3 ++-
 app/signup/page.tsx                           |  5 ++--
 components/editor/Block.tsx                   |  4 ++--
 .../{NotionEditor.tsx => SnapDocsEditor.tsx}  | 12 +++++-----
 ...otion-sidebar.tsx => snapdocs-sidebar.tsx} |  4 ++--
 ...ge-header.tsx => snapdocs-page-header.tsx} |  4 ++--
 components/settings/SettingsModal.tsx         |  2 +-
 components/workspace/workspace-header.tsx     |  2 +-
 docker-compose.yml                            | 20 ++++++++--------
 docker/mongodb/init.js                        |  8 +++----
 lib/db/mongodb.ts                             |  4 ++--
 package.json                                  |  3 ++-
 prisma/schema.prisma                          |  2 +-
 types/index.ts                                |  2 +-
 26 files changed, 82 insertions(+), 79 deletions(-)
 rename components/editor/{NotionEditor.tsx => SnapDocsEditor.tsx} (98%)
 rename components/layout/{notion-sidebar.tsx => snapdocs-sidebar.tsx} (99%)
 rename components/page/{notion-page-header.tsx => snapdocs-page-header.tsx} (99%)

diff --git a/.env.example b/.env.example
index 20b1942..0122c55 100644
--- a/.env.example
+++ b/.env.example
@@ -1,6 +1,6 @@
 # Database
-DATABASE_URL="postgresql://postgres:password@localhost:5432/notion_clone"
-MONGODB_URI="mongodb://localhost:27017/notion_clone"
+DATABASE_URL="postgresql://postgres:password@localhost:5432/snapdocs"
+MONGODB_URI="mongodb://localhost:27017/snapdocs"
 
 # Redis
 REDIS_URL="redis://localhost:6379"
@@ -13,7 +13,7 @@ NEXTAUTH_SECRET="your-secret-key-change-this-in-production"
 S3_ENDPOINT="http://localhost:9000"
 S3_ACCESS_KEY="minioadmin"
 S3_SECRET_KEY="minioadmin"
-S3_BUCKET="notion-clone"
+S3_BUCKET="snapdocs"
 S3_REGION="us-east-1"
 
 # Socket.io for real-time
diff --git a/AUTH_SETUP.md b/AUTH_SETUP.md
index a6d4c7f..0297b86 100644
--- a/AUTH_SETUP.md
+++ b/AUTH_SETUP.md
@@ -49,7 +49,7 @@ Make sure to set these in your `.env.local`:
 
 ```bash
 # Database
-DATABASE_URL="postgresql://postgres:password@localhost:5432/notion_clone"
+DATABASE_URL="postgresql://postgres:password@localhost:5432/snapdocs"
 
 # NextAuth.js
 NEXTAUTH_SECRET="your-secret-key-here"
@@ -110,4 +110,4 @@ NEXTAUTH_URL="http://localhost:3000"
 3. Authenticated requests → Token validated → User session available
 4. Protected routes → Check authentication → Redirect if needed
 
-The system is ready for development and includes all necessary authentication features for a production-ready Notion clone.
\ No newline at end of file
+The system is ready for development and includes all necessary authentication features for a production-ready SnapDocs application.
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
index 31ab18b..401580c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-This is a full-featured Notion clone built with:
+SnapDocs is a modern collaborative document workspace built with:
 - **Next.js 14** (App Router) for the frontend and API
 - **PostgreSQL** for structured data (users, workspaces, page metadata)
 - **MongoDB** for document storage (page content blocks)
@@ -116,7 +116,7 @@ See `prisma/schema.prisma` for the complete schema. Key models:
 - `User` - User accounts
 - `Workspace` - Team workspaces
 - `Page` - Page metadata
-- `Database` - Notion databases
+- `Database` - SnapDocs databases
 - `Permission` - Access control
 
 ### Environment Variables
diff --git a/FEATURES.md b/FEATURES.md
index af8d9f0..b72f7fd 100644
--- a/FEATURES.md
+++ b/FEATURES.md
@@ -1,4 +1,4 @@
-# Notion Clone - Feature Documentation
+# SnapDocs - Feature Documentation
 
 ## 🚀 Implemented Features
 
@@ -175,7 +175,7 @@
 
 ## 🎨 UI/UX Features
 
-- Clean, minimal interface inspired by Notion
+- Clean, minimal interface for collaborative documentation
 - Dark mode support (system preference)
 - Responsive design for mobile/tablet
 - Smooth animations and transitions
@@ -256,12 +256,12 @@ http://localhost:3000
 
 Ensure `.env.local` has:
 ```
-DATABASE_URL=postgresql://user:password@localhost:5432/notion_clone
-MONGODB_URI=mongodb://localhost:27017/notion_clone
+DATABASE_URL=postgresql://user:password@localhost:5432/snapdocs
+MONGODB_URI=mongodb://localhost:27017/snapdocs
 NEXTAUTH_SECRET=your-secret-key
 NEXTAUTH_URL=http://localhost:3000
 ```
 
 ## 🎉 Conclusion
 
-This Notion clone implements all major features of Notion with a clean, performant architecture. The codebase is well-structured, type-safe, and ready for production deployment or further development.
\ No newline at end of file
+SnapDocs implements all major features of a modern collaborative workspace with a clean, performant architecture. The codebase is well-structured, type-safe, and ready for production deployment or further development.
\ No newline at end of file
diff --git a/README.md b/README.md
index d6365f6..b0dd89c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# Notion Clone
+# SnapDocs
 
-A full-featured Notion clone built with Next.js, PostgreSQL, MongoDB, and shadcn/ui. This application replicates core Notion functionality including rich text editing, nested pages, databases, real-time collaboration, and more.
+SnapDocs is a modern collaborative document workspace built with Next.js, PostgreSQL, MongoDB, and shadcn/ui. It provides powerful features for creating, organizing, and collaborating on documents with your team.
 
 ## 🚀 Features
 
@@ -53,7 +53,7 @@ A full-featured Notion clone built with Next.js, PostgreSQL, MongoDB, and shadcn
 ## 📁 Project Structure
 
 ```
-notion-clone/
+snapdocs/
 ├── app/                      # Next.js app directory
 │   ├── (auth)/              # Authentication pages
 │   ├── (main)/              # Main application
@@ -92,8 +92,8 @@ notion-clone/
 
 1. **Clone the repository**
 ```bash
-git clone https://github.com/yourusername/notion-clone.git
-cd notion-clone
+git clone https://github.com/yourusername/snapdocs.git
+cd snapdocs
 ```
 
 2. **Install dependencies**
@@ -114,8 +114,8 @@ cp .env.example .env.local
 Edit `.env.local` with your configuration:
 ```env
 # Database
-DATABASE_URL="postgresql://postgres:password@localhost:5432/notion_clone"
-MONGODB_URI="mongodb://localhost:27017/notion_clone"
+DATABASE_URL="postgresql://postgres:password@localhost:5432/snapdocs"
+MONGODB_URI="mongodb://localhost:27017/snapdocs"
 
 # Redis
 REDIS_URL="redis://localhost:6379"
@@ -128,7 +128,7 @@ NEXTAUTH_SECRET="your-secret-key"
 S3_ENDPOINT="http://localhost:9000"
 S3_ACCESS_KEY="minioadmin"
 S3_SECRET_KEY="minioadmin"
-S3_BUCKET="notion-clone"
+S3_BUCKET="snapdocs"
 
 # Real-time
 SOCKET_URL="http://localhost:3000"
@@ -252,8 +252,8 @@ npx shadcn-ui@latest add [component-name]
 
 ### Docker Production
 ```bash
-docker build -t notion-clone .
-docker run -p 3000:3000 notion-clone
+docker build -t snapdocs .
+docker run -p 3000:3000 snapdocs
 ```
 
 ### Manual Deployment
@@ -279,7 +279,7 @@ This project is licensed under the MIT License - see the [LICENSE](./LICENSE) fi
 
 ## 🙏 Acknowledgments
 
-- Inspired by [Notion](https://notion.so)
+- Inspired by Notion's collaborative workspace concept
 - Built with [shadcn/ui](https://ui.shadcn.com)
 - Icons from [Lucide](https://lucide.dev)
 
@@ -291,4 +291,4 @@ For issues and questions:
 
 ---
 
-**Note**: This is an educational project and not affiliated with Notion Labs Inc.
\ No newline at end of file
+**Note**: This is an independent project and not affiliated with any other companies.
\ No newline at end of file
diff --git a/app/(protected)/dashboard/page.tsx b/app/(protected)/dashboard/page.tsx
index 47005b1..8537767 100644
--- a/app/(protected)/dashboard/page.tsx
+++ b/app/(protected)/dashboard/page.tsx
@@ -28,7 +28,7 @@ export default async function DashboardPage() {
     return (
       <div className="flex items-center justify-center h-full">
         <div className="text-center space-y-4 p-8">
-          <h1 className="text-2xl font-semibold">Welcome to Notion Clone</h1>
+          <h1 className="text-2xl font-semibold">Welcome to SnapDocs</h1>
           <p className="text-neutral-600 dark:text-neutral-400">
             Create your first workspace from the sidebar dropdown to get started
           </p>
diff --git a/app/(protected)/layout.tsx b/app/(protected)/layout.tsx
index 91ca2b1..fc0fbe0 100644
--- a/app/(protected)/layout.tsx
+++ b/app/(protected)/layout.tsx
@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation"
 import { getCurrentUser } from "@/lib/auth"
-import { NotionSidebar } from "@/components/layout/notion-sidebar"
+import { SnapDocsSidebar } from "@/components/layout/snapdocs-sidebar"
 import { ClientLayout } from "./ClientLayout"
 
 interface ProtectedLayoutProps {
@@ -17,7 +17,7 @@ export default async function ProtectedLayout({ children }: ProtectedLayoutProps
   return (
     <ClientLayout>
       <div className="flex h-screen bg-white dark:bg-[#191919]">
-        <NotionSidebar user={user} />
+        <SnapDocsSidebar user={user} />
         <main className="flex-1 overflow-auto">
           {children}
         </main>
diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditor.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditor.tsx
index 5d2fab8..c595e78 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditor.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditor.tsx
@@ -15,7 +15,7 @@ import {
   Menu
 } from 'lucide-react'
 import { Block, PageContent } from '@/types'
-import NotionEditor from '@/components/editor/NotionEditor'
+import SnapDocsEditor from '@/components/editor/SnapDocsEditor'
 import { Breadcrumbs } from '@/components/navigation/Breadcrumbs'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
@@ -289,7 +289,7 @@ export default function PageEditor({ page, initialContent, user }: PageEditorPro
           </div>
 
           {/* Editor */}
-          <NotionEditor
+          <SnapDocsEditor
             pageId={page.id}
             initialBlocks={initialBlocks}
             onAutoSave={handleAutoSave}
diff --git a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
index a6edfdf..a0f41e9 100644
--- a/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
+++ b/app/(protected)/workspace/[workspaceId]/page/[pageId]/PageEditorV2.tsx
@@ -4,14 +4,14 @@ import React, { useState, useCallback, useRef, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import { Block, PageContent } from '@/types'
 import dynamic from 'next/dynamic'
-import { NotionPageHeader } from '@/components/page/notion-page-header'
+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'
 
-// Dynamically import NotionEditor to avoid SSR hydration issues with DnD
-const NotionEditor = dynamic(
-  () => import('@/components/editor/NotionEditor'),
+// Dynamically import SnapDocsEditor to avoid SSR hydration issues with DnD
+const SnapDocsEditor = dynamic(
+  () => import('@/components/editor/SnapDocsEditor'),
   { 
     ssr: false,
     loading: () => (
@@ -287,14 +287,14 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
 
   return (
     <div className="min-h-screen bg-white dark:bg-[#191919]">
-      {/* Notion-style Page Header */}
-      <NotionPageHeader 
+      {/* SnapDocs-style Page Header */}
+      <SnapDocsPageHeader 
         page={{...page, icon, coverImage, updatedAt: lastUpdated}} 
         workspaceId={page.workspaceId}
         onUpdate={handleRefresh}
       />
       
-      {/* Main Content - Notion-style centered layout */}
+      {/* Main Content - SnapDocs-style centered layout */}
       <div className="w-full px-[96px] pb-[30vh]">
         <div className="max-w-[900px] mx-auto">
           {/* Title */}
@@ -321,7 +321,7 @@ export default function PageEditorV2({ page, initialContent, user }: PageEditorP
 
           {/* Editor */}
           <div className="mt-2">
-            <NotionEditor
+            <SnapDocsEditor
               pageId={page.id}
               workspaceId={page.workspaceId}
               initialBlocks={initialBlocks}
diff --git a/app/demo/page.tsx b/app/demo/page.tsx
index d3e495c..cc67a04 100644
--- a/app/demo/page.tsx
+++ b/app/demo/page.tsx
@@ -56,7 +56,7 @@ export default function DemoPage() {
           <div className="flex justify-between items-center h-16">
             <div className="flex items-center space-x-2">
               <Zap className="h-6 w-6 text-blue-600" />
-              <span className="font-bold text-xl">Notion Clone</span>
+              <span className="font-bold text-xl">SnapDocs</span>
             </div>
             <div className="flex items-center space-x-4">
               <Link href="/login">
@@ -75,7 +75,7 @@ export default function DemoPage() {
         {/* Hero Section */}
         <div className="text-center mb-12">
           <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            Welcome to Notion Clone Demo
+            Welcome to SnapDocs Demo
           </h1>
           <p className="text-xl text-gray-600 max-w-2xl mx-auto">
             Experience the power of a flexible workspace. Create documents, databases, 
diff --git a/app/globals.css b/app/globals.css
index 9b843d5..45086ac 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -118,11 +118,11 @@
 }
 
 /* Editor styles */
-.notion-editor {
+.snapdocs-editor {
   @apply min-h-full;
 }
 
-.notion-editor-container {
+.snapdocs-editor-container {
   @apply relative min-h-full;
 }
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 2f0b5ee..ce8b25a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,8 +7,8 @@ import { AuthProvider } from '@/components/providers/auth-provider'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Notion Clone',
-  description: 'A full-featured Notion clone built with Next.js',
+  title: 'SnapDocs - Collaborative Document Workspace',
+  description: 'SnapDocs - A modern collaborative document workspace for teams and individuals',
   icons: {
     icon: '/favicon.svg',
     shortcut: '/favicon.ico',
diff --git a/app/login/page.tsx b/app/login/page.tsx
index a32ec99..139eba1 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -53,7 +53,8 @@ export default function LoginPage() {
     <div className="min-h-screen flex items-center justify-center bg-white dark:bg-neutral-900">
       <div className="w-full max-w-sm space-y-6 p-6">
         <div className="space-y-2 text-center">
-          <h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
+          <h1 className="text-3xl font-bold">SnapDocs</h1>
+          <h2 className="text-xl font-semibold tracking-tight">Welcome back</h2>
           <p className="text-sm text-neutral-600 dark:text-neutral-400">
             Enter your email to sign in to your account
           </p>
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
index 4198d66..cd6c5d5 100644
--- a/app/signup/page.tsx
+++ b/app/signup/page.tsx
@@ -85,9 +85,10 @@ export default function SignupPage() {
     <div className="min-h-screen flex items-center justify-center bg-white dark:bg-neutral-900">
       <div className="w-full max-w-sm space-y-6 p-6">
         <div className="space-y-2 text-center">
-          <h1 className="text-2xl font-semibold tracking-tight">Create an account</h1>
+          <h1 className="text-3xl font-bold">SnapDocs</h1>
+          <h2 className="text-xl font-semibold tracking-tight">Create an account</h2>
           <p className="text-sm text-neutral-600 dark:text-neutral-400">
-            Enter your email to create your account
+            Join SnapDocs to start collaborating
           </p>
         </div>
 
diff --git a/components/editor/Block.tsx b/components/editor/Block.tsx
index a27beb7..9919e2f 100644
--- a/components/editor/Block.tsx
+++ b/components/editor/Block.tsx
@@ -289,7 +289,7 @@ export default function Block({
       ref={setNodeRef}
       style={style}
       className={cn(
-        "notion-block-wrapper relative", // Wrapper for the entire block including handles
+        "snapdocs-block-wrapper relative", // Wrapper for the entire block including handles
         isDragging && "z-50"
       )}
       onMouseEnter={() => !readOnly && setShowMenu(true)}
@@ -300,7 +300,7 @@ export default function Block({
     >
       {/* Block controls - positioned absolutely to the left */}
       {!readOnly && (showMenu || isSelected) && (
-        <div className="notion-block-handle flex items-center gap-1 absolute -left-12 md:-left-16 top-1 z-10">
+        <div className="snapdocs-block-handle flex items-center gap-1 absolute -left-12 md:-left-16 top-1 z-10">
           <button
             className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded opacity-60 hover:opacity-100 transition-opacity"
             onClick={() => onAddBlock?.('paragraph')}
diff --git a/components/editor/NotionEditor.tsx b/components/editor/SnapDocsEditor.tsx
similarity index 98%
rename from components/editor/NotionEditor.tsx
rename to components/editor/SnapDocsEditor.tsx
index bb0ad2c..9940f19 100644
--- a/components/editor/NotionEditor.tsx
+++ b/components/editor/SnapDocsEditor.tsx
@@ -15,7 +15,7 @@ import toast from 'react-hot-toast'
 import { useSocket } from '@/lib/socket/client'
 import { transformOperations, applyOperation, createDiff, Operation } from '@/lib/collaboration/ot'
 
-interface NotionEditorProps {
+interface SnapDocsEditorProps {
   pageId: string
   workspaceId?: string
   initialBlocks?: BlockType[]
@@ -77,7 +77,7 @@ function editorReducer(state: EditorState, action: EditorAction): EditorState {
 
 type SaveStatus = 'saved' | 'saving' | 'error' | 'unsaved'
 
-export default function NotionEditor({ 
+export default function SnapDocsEditor({ 
   pageId,
   workspaceId, 
   initialBlocks = [], 
@@ -88,7 +88,7 @@ export default function NotionEditor({
   showSaveStatus = true,
   userId,
   onBlockUpdateReceived
-}: NotionEditorProps) {
+}: SnapDocsEditorProps) {
   const { 
     sendBlockUpdate, 
     sendBlockAdd, 
@@ -683,7 +683,7 @@ export default function NotionEditor({
 
   if (readOnly) {
     return (
-      <div className="notion-editor w-full">
+      <div className="snapdocs-editor w-full">
         {blocks.map((block) => (
           <BlockV2
             key={block.id}
@@ -698,7 +698,7 @@ export default function NotionEditor({
   }
 
   return (
-    <div className="notion-editor-container">
+    <div className="snapdocs-editor-container">
       {/* Save status indicator */}
       {showSaveStatus && (
         <div className="fixed top-4 right-4 z-50">
@@ -715,7 +715,7 @@ export default function NotionEditor({
         </div>
       )}
 
-      <div ref={editorRef} className="notion-editor relative w-full">
+      <div ref={editorRef} className="snapdocs-editor relative w-full">
         <DndContext 
           collisionDetection={closestCenter} 
           onDragStart={handleDragStart}
diff --git a/components/layout/notion-sidebar.tsx b/components/layout/snapdocs-sidebar.tsx
similarity index 99%
rename from components/layout/notion-sidebar.tsx
rename to components/layout/snapdocs-sidebar.tsx
index c08f316..6d1162e 100644
--- a/components/layout/notion-sidebar.tsx
+++ b/components/layout/snapdocs-sidebar.tsx
@@ -48,11 +48,11 @@ interface Workspace {
   icon?: string | null
 }
 
-interface NotionSidebarProps {
+interface SnapDocsSidebarProps {
   user: User
 }
 
-export function NotionSidebar({ user }: NotionSidebarProps) {
+export function SnapDocsSidebar({ user }: SnapDocsSidebarProps) {
   const pathname = usePathname()
   const router = useRouter()
   const [workspaces, setWorkspaces] = useState<Workspace[]>([])
diff --git a/components/page/notion-page-header.tsx b/components/page/snapdocs-page-header.tsx
similarity index 99%
rename from components/page/notion-page-header.tsx
rename to components/page/snapdocs-page-header.tsx
index 35ba7af..96bc7ba 100644
--- a/components/page/notion-page-header.tsx
+++ b/components/page/snapdocs-page-header.tsx
@@ -37,7 +37,7 @@ import toast from "react-hot-toast"
 import { cn } from "@/lib/utils"
 import { ActiveUsers } from "@/components/collaboration/ActiveUsers"
 
-interface NotionPageHeaderProps {
+interface SnapDocsPageHeaderProps {
   page: any
   workspaceId: string
   onUpdate?: () => void
@@ -45,7 +45,7 @@ interface NotionPageHeaderProps {
 
 const EMOJI_OPTIONS = ["📝", "📄", "📚", "📖", "💡", "🎯", "🚀", "💼", "📊", "🎨", "🔬", "✨", "🌟", "💎", "🏆", "🎉", "📌", "📍", "🔖", "📋"]
 
-export function NotionPageHeader({ page, workspaceId, onUpdate }: NotionPageHeaderProps) {
+export function SnapDocsPageHeader({ page, workspaceId, onUpdate }: SnapDocsPageHeaderProps) {
   const router = useRouter()
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
index 8e8a144..75a728a 100644
--- a/components/settings/SettingsModal.tsx
+++ b/components/settings/SettingsModal.tsx
@@ -588,7 +588,7 @@ export function SettingsModal({ open, onOpenChange, user, workspaceId }: Setting
         <div className="space-y-4">
           <Label className="text-sm font-medium">Theme</Label>
           <p className="text-sm text-gray-500 dark:text-gray-400">
-            Choose how Notion looks to you
+            Choose how SnapDocs looks to you
           </p>
           
           <div className="grid grid-cols-3 gap-3">
diff --git a/components/workspace/workspace-header.tsx b/components/workspace/workspace-header.tsx
index 0b961f2..e5c1bc3 100644
--- a/components/workspace/workspace-header.tsx
+++ b/components/workspace/workspace-header.tsx
@@ -43,7 +43,7 @@ export function WorkspaceHeader({ user }: WorkspaceHeaderProps) {
         <div className="flex justify-between items-center h-16">
           <div className="flex items-center">
             <h1 className="text-xl font-semibold text-gray-900">
-              Notion Clone
+              SnapDocs
             </h1>
           </div>
           
diff --git a/docker-compose.yml b/docker-compose.yml
index d4744c4..ca72bfd 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -4,12 +4,12 @@ services:
   # PostgreSQL - Main relational database
   postgres:
     image: postgres:16-alpine
-    container_name: notion-postgres
+    container_name: snapdocs-postgres
     restart: unless-stopped
     environment:
       POSTGRES_USER: postgres
       POSTGRES_PASSWORD: password
-      POSTGRES_DB: notion_clone
+      POSTGRES_DB: snapdocs
     ports:
       - "5432:5432"
     volumes:
@@ -23,12 +23,12 @@ services:
   # MongoDB - Document store for page content
   mongodb:
     image: mongo:7.0
-    container_name: notion-mongodb
+    container_name: snapdocs-mongodb
     restart: unless-stopped
     environment:
       MONGO_INITDB_ROOT_USERNAME: admin
       MONGO_INITDB_ROOT_PASSWORD: password
-      MONGO_INITDB_DATABASE: notion_clone
+      MONGO_INITDB_DATABASE: snapdocs
     ports:
       - "27017:27017"
     volumes:
@@ -43,7 +43,7 @@ services:
   # Redis - Caching and session management
   redis:
     image: redis:7-alpine
-    container_name: notion-redis
+    container_name: snapdocs-redis
     restart: unless-stopped
     command: redis-server --appendonly yes
     ports:
@@ -59,7 +59,7 @@ services:
   # MinIO - S3-compatible object storage for files
   minio:
     image: minio/minio:latest
-    container_name: notion-minio
+    container_name: snapdocs-minio
     restart: unless-stopped
     environment:
       MINIO_ROOT_USER: minioadmin
@@ -79,15 +79,15 @@ services:
   # Create MinIO bucket on startup
   minio-setup:
     image: minio/mc:latest
-    container_name: notion-minio-setup
+    container_name: snapdocs-minio-setup
     depends_on:
       minio:
         condition: service_healthy
     entrypoint: >
       /bin/sh -c "
       /usr/bin/mc alias set myminio http://minio:9000 minioadmin minioadmin;
-      /usr/bin/mc mb --ignore-existing myminio/notion-clone;
-      /usr/bin/mc anonymous set public myminio/notion-clone;
+      /usr/bin/mc mb --ignore-existing myminio/snapdocs;
+      /usr/bin/mc anonymous set public myminio/snapdocs;
       exit 0;
       "
 
@@ -103,5 +103,5 @@ volumes:
 
 networks:
   default:
-    name: notion-network
+    name: snapdocs-network
     driver: bridge
\ No newline at end of file
diff --git a/docker/mongodb/init.js b/docker/mongodb/init.js
index 5781013..cad365c 100644
--- a/docker/mongodb/init.js
+++ b/docker/mongodb/init.js
@@ -1,14 +1,14 @@
 // MongoDB initialization script
-db = db.getSiblingDB('notion_clone');
+db = db.getSiblingDB('snapdocs');
 
 // Create user for the application
 db.createUser({
-  user: 'notion_user',
-  pwd: 'notion_password',
+  user: 'snapdocs_user',
+  pwd: 'snapdocs_password',
   roles: [
     {
       role: 'readWrite',
-      db: 'notion_clone'
+      db: 'snapdocs'
     }
   ]
 });
diff --git a/lib/db/mongodb.ts b/lib/db/mongodb.ts
index edaf0a8..a5eac32 100644
--- a/lib/db/mongodb.ts
+++ b/lib/db/mongodb.ts
@@ -4,7 +4,7 @@ declare global {
   var _mongoClientPromise: Promise<MongoClient> | undefined
 }
 
-const uri = process.env.MONGODB_URI || 'mongodb://localhost:27017/notion_clone'
+const uri = process.env.MONGODB_URI || 'mongodb://localhost:27017/snapdocs'
 const options = {}
 
 let client: MongoClient
@@ -23,7 +23,7 @@ if (process.env.NODE_ENV === 'development') {
 
 export async function getMongoDb(): Promise<Db> {
   const client = await clientPromise
-  return client.db('notion_clone')
+  return client.db('snapdocs')
 }
 
 export default clientPromise
\ No newline at end of file
diff --git a/package.json b/package.json
index 9722f12..22b9ccf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
-  "name": "notion-clone",
+  "name": "snapdocs",
   "version": "0.1.0",
+  "description": "SnapDocs - A modern collaborative document workspace",
   "private": true,
   "scripts": {
     "dev": "node server.js",
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index e58fdbb..ec8810e 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -107,7 +107,7 @@ model Page {
   @@index([isPublished, isArchived, isDeleted])
 }
 
-// Database model (Notion database)
+// Database model (snapdocs database)
 model Database {
   id            String    @id @default(cuid())
   name          String
diff --git a/types/index.ts b/types/index.ts
index 5e44c63..48c691c 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -1,4 +1,4 @@
-// Core types for Notion Clone
+// Core types for SnapDocs
 
 export interface User {
   id: string

From e027b2d1aa0749ab45db161a6aa1be8a47f9d176 Mon Sep 17 00:00:00 2001
From: Macwan Nevil <macnev2013@gmail.com>
Date: Mon, 25 Aug 2025 12:35:04 +0530
Subject: [PATCH 42/43] deployment

---
 .dockerignore                        |  69 +++++
 .env.production.example              |  59 ++++
 .github/dependabot.yml               |  52 ++++
 .github/workflows/ci.yml             | 243 +++++++++++++++
 .github/workflows/docker-publish.yml |  88 ++++++
 DEPLOYMENT.md                        | 425 +++++++++++++++++++++++++++
 Dockerfile                           |  73 +++++
 app/api/health/route.ts              |  58 ++++
 docker-compose.production.yml        | 143 +++++++++
 docker/mongodb/init-prod.js          |  92 ++++++
 docker/nginx/nginx.conf              | 173 +++++++++++
 package.json                         |   2 +
 12 files changed, 1477 insertions(+)
 create mode 100644 .dockerignore
 create mode 100644 .env.production.example
 create mode 100644 .github/dependabot.yml
 create mode 100644 .github/workflows/ci.yml
 create mode 100644 .github/workflows/docker-publish.yml
 create mode 100644 DEPLOYMENT.md
 create mode 100644 Dockerfile
 create mode 100644 app/api/health/route.ts
 create mode 100644 docker-compose.production.yml
 create mode 100644 docker/mongodb/init-prod.js
 create mode 100644 docker/nginx/nginx.conf

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..43014f3
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,69 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Next.js
+.next
+out
+dist
+
+# Environment files
+.env
+.env.local
+.env.production.local
+.env.development.local
+.env.test.local
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+.DS_Store
+
+# Testing
+coverage
+.nyc_output
+
+# Git
+.git
+.gitignore
+
+# Documentation
+README.md
+CLAUDE.md
+AUTH_SETUP.md
+FEATURES.md
+docs
+
+# Docker
+Dockerfile
+docker-compose*.yml
+.dockerignore
+
+# CI/CD
+.github
+.gitlab-ci.yml
+.circleci
+
+# Development
+.eslintrc.json
+.prettierrc
+jest.config.js
+cypress
+cypress.json
+
+# Logs
+logs
+*.log
+
+# OS files
+Thumbs.db
+
+# Temporary files
+tmp
+temp
+.tmp
\ No newline at end of file
diff --git a/.env.production.example b/.env.production.example
new file mode 100644
index 0000000..1938adb
--- /dev/null
+++ b/.env.production.example
@@ -0,0 +1,59 @@
+# Production Environment Variables
+# Copy this file to .env.production and fill in your values
+
+# Database
+DATABASE_URL="postgresql://postgres:SECURE_PASSWORD@postgres:5432/snapdocs"
+MONGODB_URI="mongodb://snapdocs_user:SECURE_PASSWORD@mongodb:27017/snapdocs?authSource=snapdocs"
+
+# Redis
+REDIS_URL="redis://:SECURE_PASSWORD@redis:6379"
+REDIS_PASSWORD="SECURE_PASSWORD"
+
+# NextAuth
+NEXTAUTH_URL="https://your-domain.com"
+NEXTAUTH_SECRET="generate-with-openssl-rand-base64-32"
+
+# File Storage (MinIO or S3)
+S3_ENDPOINT="https://s3.your-domain.com"
+S3_ACCESS_KEY="your-access-key"
+S3_SECRET_KEY="your-secret-key"
+S3_BUCKET="snapdocs"
+S3_REGION="us-east-1"
+
+# Socket.io for real-time
+NEXT_PUBLIC_SOCKET_URL="https://your-domain.com"
+
+# App Configuration
+NEXT_PUBLIC_APP_URL="https://your-domain.com"
+
+# Database Passwords (for docker-compose)
+POSTGRES_PASSWORD="SECURE_PASSWORD"
+MONGO_ROOT_PASSWORD="SECURE_ROOT_PASSWORD"
+MONGO_PASSWORD="SECURE_PASSWORD"
+
+# OAuth Providers (optional)
+GOOGLE_CLIENT_ID=""
+GOOGLE_CLIENT_SECRET=""
+GITHUB_CLIENT_ID=""
+GITHUB_CLIENT_SECRET=""
+
+# Email Service (optional)
+SMTP_HOST=""
+SMTP_PORT=""
+SMTP_USER=""
+SMTP_PASSWORD=""
+SMTP_FROM=""
+
+# Analytics (optional)
+NEXT_PUBLIC_GOOGLE_ANALYTICS=""
+NEXT_PUBLIC_POSTHOG_KEY=""
+NEXT_PUBLIC_POSTHOG_HOST=""
+
+# Sentry Error Tracking (optional)
+SENTRY_DSN=""
+NEXT_PUBLIC_SENTRY_DSN=""
+
+# Feature Flags
+ENABLE_SIGNUP="true"
+ENABLE_OAUTH="true"
+MAINTENANCE_MODE="false"
\ No newline at end of file
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 0000000..b2d6960
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,52 @@
+version: 2
+updates:
+  # Enable version updates for npm
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+      time: "04:00"
+    open-pull-requests-limit: 10
+    reviewers:
+      - "nevil"
+    labels:
+      - "dependencies"
+      - "npm"
+    commit-message:
+      prefix: "chore"
+      include: "scope"
+
+  # Enable version updates for Docker
+  - package-ecosystem: "docker"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+      time: "04:00"
+    open-pull-requests-limit: 5
+    reviewers:
+      - "nevil"
+    labels:
+      - "dependencies"
+      - "docker"
+    commit-message:
+      prefix: "chore"
+      include: "scope"
+
+  # Enable version updates for GitHub Actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+      time: "04:00"
+    open-pull-requests-limit: 5
+    reviewers:
+      - "nevil"
+    labels:
+      - "dependencies"
+      - "github-actions"
+    commit-message:
+      prefix: "chore"
+      include: "scope"
\ No newline at end of file
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..a106046
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,243 @@
+name: CI/CD Pipeline
+
+on:
+  push:
+    branches: [ main, develop ]
+  pull_request:
+    branches: [ main ]
+
+env:
+  NODE_VERSION: '20'
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  # Code Quality Checks
+  quality:
+    name: Code Quality
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linter
+        run: npm run lint
+
+      - name: Run type check
+        run: npm run typecheck
+
+      - name: Run format check
+        run: npm run format:check || true
+
+  # Security Scanning
+  security:
+    name: Security Scan
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Run Trivy vulnerability scanner
+        uses: aquasecurity/trivy-action@master
+        with:
+          scan-type: 'fs'
+          scan-ref: '.'
+          format: 'sarif'
+          output: 'trivy-results.sarif'
+
+      - name: Upload Trivy results to GitHub Security
+        uses: github/codeql-action/upload-sarif@v3
+        if: always()
+        with:
+          sarif_file: 'trivy-results.sarif'
+
+  # Unit Tests
+  test:
+    name: Unit Tests
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:16-alpine
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: testpassword
+          POSTGRES_DB: snapdocs_test
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 5432:5432
+
+      mongodb:
+        image: mongo:7.0
+        env:
+          MONGO_INITDB_ROOT_USERNAME: admin
+          MONGO_INITDB_ROOT_PASSWORD: testpassword
+          MONGO_INITDB_DATABASE: snapdocs_test
+        options: >-
+          --health-cmd "echo 'db.runCommand(\"ping\").ok' | mongosh localhost:27017/test --quiet"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 27017:27017
+
+      redis:
+        image: redis:7-alpine
+        options: >-
+          --health-cmd "redis-cli ping"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 6379:6379
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Setup test environment
+        run: |
+          cp .env.example .env.test
+          echo "DATABASE_URL=postgresql://postgres:testpassword@localhost:5432/snapdocs_test" >> .env.test
+          echo "MONGODB_URI=mongodb://admin:testpassword@localhost:27017/snapdocs_test?authSource=admin" >> .env.test
+          echo "REDIS_URL=redis://localhost:6379" >> .env.test
+
+      - name: Run Prisma migrations
+        run: npx prisma migrate deploy
+        env:
+          DATABASE_URL: postgresql://postgres:testpassword@localhost:5432/snapdocs_test
+
+      - name: Run tests
+        run: npm test -- --passWithNoTests
+        env:
+          NODE_ENV: test
+          DATABASE_URL: postgresql://postgres:testpassword@localhost:5432/snapdocs_test
+          MONGODB_URI: mongodb://admin:testpassword@localhost:27017/snapdocs_test?authSource=admin
+          REDIS_URL: redis://localhost:6379
+
+  # Build Docker Image
+  build:
+    name: Build Docker Image
+    runs-on: ubuntu-latest
+    needs: [quality, security, test]
+    if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/develop')
+    
+    permissions:
+      contents: read
+      packages: write
+      
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=sha,prefix={{branch}}-
+            type=raw,value=latest,enable={{is_default_branch}}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          build-args: |
+            BUILDKIT_CONTEXT_KEEP_GIT_DIR=true
+
+  # Deploy to Staging
+  deploy-staging:
+    name: Deploy to Staging
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.ref == 'refs/heads/develop'
+    environment:
+      name: staging
+      url: https://staging.snapdocs.app
+    
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Deploy to staging server
+        run: |
+          echo "Deploying to staging environment"
+          # Add your deployment script here
+          # Example: SSH to server and run docker-compose
+          # Or trigger webhook to deployment service
+
+  # Deploy to Production
+  deploy-production:
+    name: Deploy to Production
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.ref == 'refs/heads/main'
+    environment:
+      name: production
+      url: https://snapdocs.app
+    
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Deploy to production server
+        run: |
+          echo "Deploying to production environment"
+          # Add your deployment script here
+          # Example: SSH to server and run docker-compose
+          # Or trigger webhook to deployment service
+
+  # Notify on Success
+  notify-success:
+    name: Notify Success
+    runs-on: ubuntu-latest
+    needs: [deploy-staging, deploy-production]
+    if: always() && (needs.deploy-staging.result == 'success' || needs.deploy-production.result == 'success')
+    
+    steps:
+      - name: Send success notification
+        run: |
+          echo "Deployment successful!"
+          # Add notification logic here (Slack, Discord, email, etc.)
\ No newline at end of file
diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
new file mode 100644
index 0000000..e055b47
--- /dev/null
+++ b/.github/workflows/docker-publish.yml
@@ -0,0 +1,88 @@
+name: Docker Build and Publish
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: 'Docker image tag'
+        required: true
+        default: 'latest'
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+  DOCKERHUB_IMAGE: ${{ secrets.DOCKERHUB_USERNAME }}/snapdocs
+
+jobs:
+  build-and-push:
+    name: Build and Push Docker Image
+    runs-on: ubuntu-latest
+    
+    permissions:
+      contents: read
+      packages: write
+      
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Log in to Docker Hub
+        if: github.event_name == 'release' || github.event_name == 'workflow_dispatch'
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+            ${{ env.DOCKERHUB_IMAGE }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=tag
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=raw,value=latest,enable={{is_default_branch}}
+            type=raw,value=${{ github.event.inputs.tag }},enable=${{ github.event_name == 'workflow_dispatch' }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          build-args: |
+            BUILDKIT_CONTEXT_KEEP_GIT_DIR=true
+
+      - name: Update Docker Hub Description
+        if: github.event_name == 'release'
+        uses: peter-evans/dockerhub-description@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+          repository: ${{ secrets.DOCKERHUB_USERNAME }}/snapdocs
+          readme-filepath: ./README.md
+          short-description: 'SnapDocs - Modern collaborative document workspace'
\ No newline at end of file
diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md
new file mode 100644
index 0000000..58233a8
--- /dev/null
+++ b/DEPLOYMENT.md
@@ -0,0 +1,425 @@
+# SnapDocs Deployment Guide
+
+This guide covers various deployment options for SnapDocs, from simple one-click deployments to complex production setups.
+
+## Table of Contents
+- [Quick Start](#quick-start)
+- [Docker Deployment](#docker-deployment)
+- [Cloud Deployments](#cloud-deployments)
+- [Production Setup](#production-setup)
+- [CI/CD Pipeline](#cicd-pipeline)
+- [Environment Variables](#environment-variables)
+- [SSL/TLS Configuration](#ssltls-configuration)
+- [Monitoring & Maintenance](#monitoring--maintenance)
+
+## Quick Start
+
+### One-Click Deployment with Docker
+
+```bash
+# Clone the repository
+git clone https://github.com/yourusername/snapdocs.git
+cd snapdocs
+
+# Copy environment variables
+cp .env.production.example .env.production
+
+# Edit .env.production with your settings
+nano .env.production
+
+# Start all services
+docker-compose -f docker-compose.production.yml up -d
+
+# Run database migrations
+docker-compose -f docker-compose.production.yml exec app npx prisma migrate deploy
+```
+
+Your application will be available at `http://localhost:3000`
+
+## Docker Deployment
+
+### Building the Docker Image
+
+```bash
+# Build for production
+docker build -t snapdocs:latest .
+
+# Or build with specific version tag
+docker build -t snapdocs:v1.0.0 .
+
+# Multi-platform build (AMD64 and ARM64)
+docker buildx build --platform linux/amd64,linux/arm64 -t snapdocs:latest .
+```
+
+### Running with Docker
+
+```bash
+# Run standalone container
+docker run -d \
+  --name snapdocs \
+  -p 3000:3000 \
+  --env-file .env.production \
+  snapdocs:latest
+
+# With docker-compose (recommended)
+docker-compose -f docker-compose.production.yml up -d
+```
+
+### Docker Hub Deployment
+
+```bash
+# Tag and push to Docker Hub
+docker tag snapdocs:latest yourusername/snapdocs:latest
+docker push yourusername/snapdocs:latest
+
+# Pull and run from Docker Hub
+docker pull yourusername/snapdocs:latest
+docker run -d -p 3000:3000 --env-file .env.production yourusername/snapdocs:latest
+```
+
+## Cloud Deployments
+
+### Deploy to Railway
+
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template)
+
+1. Click the button above
+2. Configure environment variables
+3. Deploy
+
+### Deploy to Render
+
+1. Create a new Web Service on Render
+2. Connect your GitHub repository
+3. Use the following settings:
+   - Build Command: `npm install && npm run build`
+   - Start Command: `npm start`
+4. Add environment variables from `.env.production.example`
+
+### Deploy to DigitalOcean App Platform
+
+```bash
+# Install doctl CLI
+brew install doctl
+
+# Create app
+doctl apps create --spec .do/app.yaml
+```
+
+### Deploy to AWS ECS
+
+```bash
+# Build and push to ECR
+aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin $ECR_REGISTRY
+docker build -t snapdocs .
+docker tag snapdocs:latest $ECR_REGISTRY/snapdocs:latest
+docker push $ECR_REGISTRY/snapdocs:latest
+
+# Deploy with ECS
+aws ecs update-service --cluster snapdocs-cluster --service snapdocs-service --force-new-deployment
+```
+
+### Deploy to Google Cloud Run
+
+```bash
+# Build and push to GCR
+gcloud builds submit --tag gcr.io/PROJECT_ID/snapdocs
+
+# Deploy to Cloud Run
+gcloud run deploy snapdocs \
+  --image gcr.io/PROJECT_ID/snapdocs \
+  --platform managed \
+  --region us-central1 \
+  --allow-unauthenticated
+```
+
+### Deploy to Azure Container Instances
+
+```bash
+# Create resource group
+az group create --name snapdocs-rg --location eastus
+
+# Create container instance
+az container create \
+  --resource-group snapdocs-rg \
+  --name snapdocs \
+  --image yourusername/snapdocs:latest \
+  --dns-name-label snapdocs \
+  --ports 3000 \
+  --environment-variables-file .env.production
+```
+
+## Production Setup
+
+### Prerequisites
+
+- Docker and Docker Compose
+- Domain name with DNS configured
+- SSL certificates (or use Let's Encrypt)
+- Minimum 2GB RAM, 2 CPU cores
+- 20GB storage
+
+### Step-by-Step Production Deployment
+
+1. **Prepare the server**
+```bash
+# Update system
+sudo apt update && sudo apt upgrade -y
+
+# Install Docker
+curl -fsSL https://get.docker.com -o get-docker.sh
+sudo sh get-docker.sh
+
+# Install Docker Compose
+sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
+sudo chmod +x /usr/local/bin/docker-compose
+```
+
+2. **Clone and configure**
+```bash
+# Clone repository
+git clone https://github.com/yourusername/snapdocs.git /opt/snapdocs
+cd /opt/snapdocs
+
+# Setup environment
+cp .env.production.example .env.production
+# Edit .env.production with your production values
+```
+
+3. **Setup SSL with Let's Encrypt**
+```bash
+# Install Certbot
+sudo apt install certbot -y
+
+# Get certificates
+sudo certbot certonly --standalone -d yourdomain.com -d www.yourdomain.com
+
+# Copy certificates to nginx directory
+sudo cp /etc/letsencrypt/live/yourdomain.com/fullchain.pem ./docker/nginx/ssl/
+sudo cp /etc/letsencrypt/live/yourdomain.com/privkey.pem ./docker/nginx/ssl/
+```
+
+4. **Update nginx configuration**
+```bash
+# Edit nginx.conf
+sed -i 's/your-domain.com/yourdomain.com/g' docker/nginx/nginx.conf
+```
+
+5. **Start services**
+```bash
+# Start all services
+docker-compose -f docker-compose.production.yml up -d
+
+# Check logs
+docker-compose -f docker-compose.production.yml logs -f
+
+# Run migrations
+docker-compose -f docker-compose.production.yml exec app npx prisma migrate deploy
+
+# Create first admin user (optional)
+docker-compose -f docker-compose.production.yml exec app npm run seed:admin
+```
+
+## CI/CD Pipeline
+
+### GitHub Actions Setup
+
+The repository includes GitHub Actions workflows for:
+- Continuous Integration (testing, linting, type checking)
+- Docker image building and publishing
+- Automated deployment to staging/production
+
+To enable:
+
+1. **Set GitHub Secrets**:
+   - `DOCKERHUB_USERNAME`: Your Docker Hub username
+   - `DOCKERHUB_TOKEN`: Docker Hub access token
+   - `PRODUCTION_HOST`: Production server IP/hostname
+   - `PRODUCTION_SSH_KEY`: SSH private key for deployment
+   - `STAGING_HOST`: Staging server IP/hostname
+   - `STAGING_SSH_KEY`: SSH private key for staging
+
+2. **Configure deployment branches**:
+   - `main` branch → Production deployment
+   - `develop` branch → Staging deployment
+
+3. **Trigger deployment**:
+```bash
+# Deploy to staging
+git push origin develop
+
+# Deploy to production
+git push origin main
+
+# Or create a release
+git tag v1.0.0
+git push origin v1.0.0
+```
+
+## Environment Variables
+
+### Required Variables
+
+```env
+# Database
+DATABASE_URL=postgresql://user:pass@host:5432/db
+MONGODB_URI=mongodb://user:pass@host:27017/db
+
+# Authentication
+NEXTAUTH_URL=https://yourdomain.com
+NEXTAUTH_SECRET=generate-with-openssl-rand-base64-32
+
+# Redis
+REDIS_URL=redis://host:6379
+
+# File Storage
+S3_ENDPOINT=https://s3.amazonaws.com
+S3_ACCESS_KEY=your-key
+S3_SECRET_KEY=your-secret
+S3_BUCKET=your-bucket
+```
+
+### Optional Variables
+
+```env
+# OAuth
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
+
+# Email
+SMTP_HOST=smtp.gmail.com
+SMTP_PORT=587
+SMTP_USER=your-email
+SMTP_PASSWORD=your-password
+
+# Analytics
+NEXT_PUBLIC_GOOGLE_ANALYTICS=GA-XXXXXX
+SENTRY_DSN=https://xxx@sentry.io/xxx
+```
+
+## SSL/TLS Configuration
+
+### Using Let's Encrypt (Recommended)
+
+```bash
+# Auto-renewal with cron
+echo "0 0 * * * root certbot renew --quiet" | sudo tee -a /etc/crontab > /dev/null
+```
+
+### Using Custom SSL Certificates
+
+1. Place your certificates in `docker/nginx/ssl/`
+2. Update `docker/nginx/nginx.conf` with correct paths
+3. Restart nginx container
+
+## Monitoring & Maintenance
+
+### Health Checks
+
+```bash
+# Check application health
+curl http://localhost:3000/api/health
+
+# Check all services
+docker-compose -f docker-compose.production.yml ps
+
+# View logs
+docker-compose -f docker-compose.production.yml logs -f app
+```
+
+### Backup Strategy
+
+```bash
+# Backup PostgreSQL
+docker-compose -f docker-compose.production.yml exec postgres \
+  pg_dump -U postgres snapdocs > backup-$(date +%Y%m%d).sql
+
+# Backup MongoDB
+docker-compose -f docker-compose.production.yml exec mongodb \
+  mongodump --db snapdocs --out /backup/
+
+# Backup uploaded files (MinIO/S3)
+aws s3 sync s3://snapdocs s3://snapdocs-backup-$(date +%Y%m%d)/
+```
+
+### Update Deployment
+
+```bash
+# Pull latest changes
+git pull origin main
+
+# Rebuild and restart
+docker-compose -f docker-compose.production.yml build
+docker-compose -f docker-compose.production.yml up -d
+
+# Run migrations if needed
+docker-compose -f docker-compose.production.yml exec app npx prisma migrate deploy
+```
+
+### Scaling
+
+For high-traffic deployments:
+
+1. **Horizontal Scaling**:
+```yaml
+# docker-compose.production.yml
+app:
+  scale: 3  # Run 3 instances
+```
+
+2. **Load Balancing**:
+- Use nginx as load balancer (included)
+- Or use cloud load balancers (AWS ELB, GCP LB)
+
+3. **Database Scaling**:
+- Use managed databases (RDS, Cloud SQL)
+- Set up read replicas
+- Implement connection pooling
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Port already in use**:
+```bash
+# Find and kill process using port 3000
+sudo lsof -i :3000
+sudo kill -9 <PID>
+```
+
+2. **Database connection failed**:
+```bash
+# Check database is running
+docker-compose -f docker-compose.production.yml ps postgres mongodb
+
+# Test connection
+docker-compose -f docker-compose.production.yml exec app npx prisma db push
+```
+
+3. **Out of memory**:
+```bash
+# Increase Docker memory limit
+docker update --memory="4g" snapdocs
+```
+
+4. **SSL certificate issues**:
+```bash
+# Renew certificates
+sudo certbot renew --force-renewal
+
+# Restart nginx
+docker-compose -f docker-compose.production.yml restart nginx
+```
+
+## Support
+
+For deployment issues:
+- Check logs: `docker-compose logs -f`
+- GitHub Issues: [github.com/yourusername/snapdocs/issues](https://github.com/yourusername/snapdocs/issues)
+- Documentation: [docs.snapdocs.app](https://docs.snapdocs.app)
+
+## License
+
+SnapDocs is open source software licensed under the MIT license.
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..58520bc
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,73 @@
+# Multi-stage Docker build for Next.js application
+# Stage 1: Dependencies
+FROM node:20-alpine AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+COPY prisma ./prisma/
+
+# Install dependencies based on the preferred package manager
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Generate Prisma Client
+RUN npx prisma generate
+
+# Stage 2: Builder
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Set environment variables for build
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV NODE_ENV production
+
+# Build the application
+RUN npm run build
+
+# Stage 3: Runner
+FROM node:20-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Create a non-root user
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy necessary files
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+
+# Set the correct permission for prerender cache
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Copy prisma schema and generate client
+COPY --from=builder /app/prisma ./prisma
+COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma
+COPY --from=builder /app/node_modules/@prisma ./node_modules/@prisma
+
+# Create necessary directories with correct permissions
+RUN mkdir -p /app/.next/cache && chown -R nextjs:nodejs /app/.next
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:3000/api/health', (res) => { process.exit(res.statusCode === 200 ? 0 : 1); });"
+
+CMD ["node", "server.js"]
\ No newline at end of file
diff --git a/app/api/health/route.ts b/app/api/health/route.ts
new file mode 100644
index 0000000..2f9967d
--- /dev/null
+++ b/app/api/health/route.ts
@@ -0,0 +1,58 @@
+import { NextResponse } from 'next/server'
+import { prisma } from '@/lib/prisma'
+import { getMongoDb } from '@/lib/db/mongodb'
+import { Redis } from 'ioredis'
+
+export async function GET() {
+  const health = {
+    status: 'healthy',
+    timestamp: new Date().toISOString(),
+    services: {
+      app: 'healthy',
+      postgres: 'unknown',
+      mongodb: 'unknown',
+      redis: 'unknown',
+    },
+    version: process.env.npm_package_version || '1.0.0',
+    environment: process.env.NODE_ENV,
+  }
+
+  // Check PostgreSQL
+  try {
+    await prisma.$queryRaw`SELECT 1`
+    health.services.postgres = 'healthy'
+  } catch (error) {
+    health.services.postgres = 'unhealthy'
+    health.status = 'degraded'
+  }
+
+  // Check MongoDB
+  try {
+    const db = await getMongoDb()
+    await db.command({ ping: 1 })
+    health.services.mongodb = 'healthy'
+  } catch (error) {
+    health.services.mongodb = 'unhealthy'
+    health.status = 'degraded'
+  }
+
+  // Check Redis
+  if (process.env.REDIS_URL) {
+    try {
+      const redis = new Redis(process.env.REDIS_URL)
+      await redis.ping()
+      await redis.quit()
+      health.services.redis = 'healthy'
+    } catch (error) {
+      health.services.redis = 'unhealthy'
+      health.status = 'degraded'
+    }
+  } else {
+    health.services.redis = 'not_configured'
+  }
+
+  // Return appropriate status code
+  const statusCode = health.status === 'healthy' ? 200 : 503
+
+  return NextResponse.json(health, { status: statusCode })
+}
\ No newline at end of file
diff --git a/docker-compose.production.yml b/docker-compose.production.yml
new file mode 100644
index 0000000..c971878
--- /dev/null
+++ b/docker-compose.production.yml
@@ -0,0 +1,143 @@
+version: '3.9'
+
+services:
+  # Next.js Application
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: snapdocs-app
+    restart: unless-stopped
+    ports:
+      - "3000:3000"
+    env_file:
+      - .env.production
+    environment:
+      NODE_ENV: production
+      DATABASE_URL: postgresql://postgres:${POSTGRES_PASSWORD}@postgres:5432/snapdocs
+      MONGODB_URI: mongodb://snapdocs_user:${MONGO_PASSWORD}@mongodb:27017/snapdocs?authSource=snapdocs
+      REDIS_URL: redis://redis:6379
+      S3_ENDPOINT: http://minio:9000
+    depends_on:
+      postgres:
+        condition: service_healthy
+      mongodb:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+      minio:
+        condition: service_healthy
+    networks:
+      - snapdocs-network
+
+  # PostgreSQL
+  postgres:
+    image: postgres:16-alpine
+    container_name: snapdocs-postgres
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_DB: snapdocs
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    networks:
+      - snapdocs-network
+
+  # MongoDB
+  mongodb:
+    image: mongo:7.0
+    container_name: snapdocs-mongodb
+    restart: unless-stopped
+    environment:
+      MONGO_INITDB_ROOT_USERNAME: admin
+      MONGO_INITDB_ROOT_PASSWORD: ${MONGO_ROOT_PASSWORD}
+      MONGO_INITDB_DATABASE: snapdocs
+    volumes:
+      - mongodb_data:/data/db
+      - ./docker/mongodb/init-prod.js:/docker-entrypoint-initdb.d/init.js:ro
+    healthcheck:
+      test: echo 'db.runCommand("ping").ok' | mongosh localhost:27017/test --quiet
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    networks:
+      - snapdocs-network
+
+  # Redis
+  redis:
+    image: redis:7-alpine
+    container_name: snapdocs-redis
+    restart: unless-stopped
+    command: redis-server --appendonly yes --requirepass ${REDIS_PASSWORD}
+    volumes:
+      - redis_data:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "--raw", "incr", "ping"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    networks:
+      - snapdocs-network
+
+  # MinIO
+  minio:
+    image: minio/minio:latest
+    container_name: snapdocs-minio
+    restart: unless-stopped
+    environment:
+      MINIO_ROOT_USER: ${S3_ACCESS_KEY}
+      MINIO_ROOT_PASSWORD: ${S3_SECRET_KEY}
+    command: server /data --console-address ":9001"
+    ports:
+      - "9001:9001"  # MinIO Console (optional, remove in production)
+    volumes:
+      - minio_data:/data
+    healthcheck:
+      test: ["CMD", "mc", "ready", "local"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    networks:
+      - snapdocs-network
+
+  # Nginx Reverse Proxy (optional but recommended)
+  nginx:
+    image: nginx:alpine
+    container_name: snapdocs-nginx
+    restart: unless-stopped
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./docker/nginx/nginx.conf:/etc/nginx/nginx.conf:ro
+      - ./docker/nginx/ssl:/etc/nginx/ssl:ro
+      - nginx_cache:/var/cache/nginx
+    depends_on:
+      - app
+    networks:
+      - snapdocs-network
+
+volumes:
+  postgres_data:
+    driver: local
+  mongodb_data:
+    driver: local
+  redis_data:
+    driver: local
+  minio_data:
+    driver: local
+  nginx_cache:
+    driver: local
+
+networks:
+  snapdocs-network:
+    driver: bridge
+    ipam:
+      config:
+        - subnet: 172.28.0.0/16
\ No newline at end of file
diff --git a/docker/mongodb/init-prod.js b/docker/mongodb/init-prod.js
new file mode 100644
index 0000000..bc584cd
--- /dev/null
+++ b/docker/mongodb/init-prod.js
@@ -0,0 +1,92 @@
+// MongoDB initialization script for production
+db = db.getSiblingDB('snapdocs');
+
+// Create application user with limited privileges
+db.createUser({
+  user: 'snapdocs_user',
+  pwd: process.env.MONGO_PASSWORD || 'changeme',
+  roles: [
+    {
+      role: 'readWrite',
+      db: 'snapdocs'
+    }
+  ]
+});
+
+// Create collections with schema validation
+db.createCollection('pages', {
+  validator: {
+    $jsonSchema: {
+      bsonType: 'object',
+      required: ['pageId', 'content', 'version'],
+      properties: {
+        pageId: {
+          bsonType: 'string',
+          description: 'must be a string and is required'
+        },
+        content: {
+          bsonType: 'object',
+          description: 'must be an object and is required'
+        },
+        version: {
+          bsonType: 'int',
+          minimum: 1,
+          description: 'must be an integer greater than 0 and is required'
+        },
+        createdAt: {
+          bsonType: 'date'
+        },
+        updatedAt: {
+          bsonType: 'date'
+        }
+      }
+    }
+  }
+});
+
+db.createCollection('page_versions', {
+  validator: {
+    $jsonSchema: {
+      bsonType: 'object',
+      required: ['pageId', 'version', 'content', 'createdAt'],
+      properties: {
+        pageId: {
+          bsonType: 'string',
+          description: 'must be a string and is required'
+        },
+        version: {
+          bsonType: 'int',
+          minimum: 1,
+          description: 'must be an integer greater than 0 and is required'
+        },
+        content: {
+          bsonType: 'object',
+          description: 'must be an object and is required'
+        },
+        createdAt: {
+          bsonType: 'date',
+          description: 'must be a date and is required'
+        }
+      }
+    }
+  }
+});
+
+db.createCollection('templates');
+db.createCollection('collaborative_sessions');
+
+// Create indexes for better performance
+db.pages.createIndex({ pageId: 1 }, { unique: true });
+db.pages.createIndex({ 'content.blocks.id': 1 });
+db.pages.createIndex({ updatedAt: -1 });
+
+db.page_versions.createIndex({ pageId: 1, version: 1 }, { unique: true });
+db.page_versions.createIndex({ pageId: 1, createdAt: -1 });
+
+db.templates.createIndex({ name: 1 });
+db.templates.createIndex({ category: 1 });
+
+db.collaborative_sessions.createIndex({ pageId: 1 });
+db.collaborative_sessions.createIndex({ createdAt: 1 }, { expireAfterSeconds: 86400 }); // Expire after 24 hours
+
+print('MongoDB production initialization completed successfully');
\ No newline at end of file
diff --git a/docker/nginx/nginx.conf b/docker/nginx/nginx.conf
new file mode 100644
index 0000000..9eabf59
--- /dev/null
+++ b/docker/nginx/nginx.conf
@@ -0,0 +1,173 @@
+user nginx;
+worker_processes auto;
+error_log /var/log/nginx/error.log warn;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections 2048;
+    use epoll;
+    multi_accept on;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log /var/log/nginx/access.log main;
+
+    # Performance optimizations
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+    client_max_body_size 100M;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_types text/plain text/css text/xml text/javascript 
+               application/json application/javascript application/xml+rss 
+               application/rss+xml application/atom+xml image/svg+xml 
+               text/x-js text/x-cross-domain-policy application/x-font-ttf 
+               application/x-font-opentype application/vnd.ms-fontobject 
+               image/x-icon;
+
+    # Cache settings
+    proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=snapdocs_cache:10m 
+                     max_size=1g inactive=60m use_temp_path=off;
+
+    # Rate limiting
+    limit_req_zone $binary_remote_addr zone=general:10m rate=10r/s;
+    limit_req_zone $binary_remote_addr zone=api:10m rate=30r/s;
+
+    # Upstream configuration
+    upstream snapdocs_app {
+        least_conn;
+        server app:3000 max_fails=3 fail_timeout=30s;
+        keepalive 32;
+    }
+
+    # Redirect HTTP to HTTPS
+    server {
+        listen 80;
+        listen [::]:80;
+        server_name _;
+        
+        location /.well-known/acme-challenge/ {
+            root /var/www/certbot;
+        }
+        
+        location / {
+            return 301 https://$host$request_uri;
+        }
+    }
+
+    # Main HTTPS server
+    server {
+        listen 443 ssl http2;
+        listen [::]:443 ssl http2;
+        server_name your-domain.com;
+
+        # SSL configuration (update paths to your certificates)
+        ssl_certificate /etc/nginx/ssl/fullchain.pem;
+        ssl_certificate_key /etc/nginx/ssl/privkey.pem;
+        ssl_session_timeout 1d;
+        ssl_session_cache shared:SSL:50m;
+        ssl_session_tickets off;
+
+        # Modern SSL configuration
+        ssl_protocols TLSv1.2 TLSv1.3;
+        ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384;
+        ssl_prefer_server_ciphers off;
+
+        # Security headers
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header Referrer-Policy "no-referrer-when-downgrade" always;
+        add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
+        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+
+        # Root location
+        location / {
+            limit_req zone=general burst=20 nodelay;
+            
+            proxy_pass http://snapdocs_app;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection 'upgrade';
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_cache_bypass $http_upgrade;
+            
+            # Timeouts
+            proxy_connect_timeout 60s;
+            proxy_send_timeout 60s;
+            proxy_read_timeout 60s;
+        }
+
+        # API endpoints
+        location /api {
+            limit_req zone=api burst=50 nodelay;
+            
+            proxy_pass http://snapdocs_app;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection 'upgrade';
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_cache_bypass $http_upgrade;
+        }
+
+        # WebSocket support for real-time features
+        location /socket.io {
+            proxy_pass http://snapdocs_app;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            
+            # WebSocket timeouts
+            proxy_connect_timeout 7d;
+            proxy_send_timeout 7d;
+            proxy_read_timeout 7d;
+        }
+
+        # Static files caching
+        location /_next/static {
+            proxy_cache snapdocs_cache;
+            proxy_cache_valid 200 365d;
+            proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
+            add_header Cache-Control "public, max-age=31536000, immutable";
+            proxy_pass http://snapdocs_app;
+        }
+
+        location /static {
+            proxy_cache snapdocs_cache;
+            proxy_cache_valid 200 365d;
+            add_header Cache-Control "public, max-age=31536000, immutable";
+            proxy_pass http://snapdocs_app;
+        }
+
+        # Health check endpoint
+        location /health {
+            access_log off;
+            add_header 'Content-Type' 'text/plain';
+            return 200 "healthy\n";
+        }
+    }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 22b9ccf..5100bbd 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "lint": "next lint",
     "typecheck": "tsc --noEmit",
     "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "jest",
     "db:generate": "prisma generate",
     "db:migrate": "prisma migrate dev",
     "db:push": "prisma db push",

From 7c03e9942a6ae0929be4e71170d51b8497eafb4d Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 26 Aug 2025 18:18:14 +0000
Subject: [PATCH 43/43] chore(deps): bump peter-evans/dockerhub-description
 from 3 to 4

Bumps [peter-evans/dockerhub-description](https://github.com/peter-evans/dockerhub-description) from 3 to 4.
- [Release notes](https://github.com/peter-evans/dockerhub-description/releases)
- [Commits](https://github.com/peter-evans/dockerhub-description/compare/v3...v4)

---
updated-dependencies:
- dependency-name: peter-evans/dockerhub-description
  dependency-version: '4'
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/docker-publish.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
index e055b47..0fa65c6 100644
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -79,7 +79,7 @@ jobs:
 
       - name: Update Docker Hub Description
         if: github.event_name == 'release'
-        uses: peter-evans/dockerhub-description@v3
+        uses: peter-evans/dockerhub-description@v4
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}