@agent-native/core 0.77.10 → 0.77.12

package/corpus/templates/content/app/components/editor/DocumentEditor.tsx

@@ -40,7 +40,6 @@ import {
   useUpdateDocument,
 } from "@/hooks/use-documents";
 import { useLocalStorage } from "@/hooks/use-local-storage";
-import { useIsMobile } from "@/hooks/use-mobile";
 import { useDocumentSyncStatus } from "@/hooks/use-notion";
 import {
   canWriteLinkedLocalSource,
@@ -155,6 +154,32 @@ interface DocumentEditorBodyProps {
   document: Document;
 }
 
+type PendingDocumentSave = {
+  title: string;
+  content: string;
+  save: (title: string, content: string) => unknown | Promise<unknown>;
+  timeout: ReturnType<typeof setTimeout>;
+};
+
+type DocumentSaveResult = {
+  contentPersisted: boolean;
+};
+
+function useMinViewportWidth(minWidth: number) {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const query = window.matchMedia(`(min-width: ${minWidth}px)`);
+    const update = () => setMatches(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, [minWidth]);
+
+  return matches;
+}
+
 export function documentEditorTitleRegionClassName(hasDatabase: boolean) {
   if (hasDatabase) {
     return cn(
@@ -184,6 +209,38 @@ export function databaseMembershipDatabaseTitle(
   return membership?.databaseTitle?.trim() || "Untitled database";
 }
 
+export function documentEditorBreadcrumbItems(
+  document: Pick<Document, "id" | "parentId" | "title" | "icon">, // i18n-ignore type expression
+  documents: Pick<Document, "id" | "parentId" | "title" | "icon">[], // i18n-ignore type expression
+) {
+  const byId = new Map(documents.map((doc) => [doc.id, doc]));
+  const parents: { id: string; title: string; icon: string | null }[] = [];
+  const seen = new Set<string>([document.id]);
+  let parentId = document.parentId;
+
+  while (parentId) {
+    if (seen.has(parentId)) break;
+    seen.add(parentId);
+    const parent = byId.get(parentId);
+    if (!parent) break;
+    parents.unshift({
+      id: parent.id,
+      title: parent.title,
+      icon: parent.icon,
+    });
+    parentId = parent.parentId;
+  }
+
+  return [
+    ...parents,
+    {
+      id: document.id,
+      title: document.title,
+      icon: document.icon,
+    },
+  ];
+}
+
 function DatabaseMembershipBreadcrumb({
   document,
   onOpenDatabase,
@@ -246,6 +303,7 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
     string | null
   >(document.updatedAt ?? null);
   const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingDocumentSaveRef = useRef<PendingDocumentSave | null>(null);
   // Separate freshness watermarks for title and content so that a content save
   // never suppresses adopting a newer external title and vice versa.
   const lastSavedTitleRef = useRef<{ title: string; updatedAt: string | null }>(
@@ -272,18 +330,12 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
   const shouldFocusTitleRef = useRef(false);
   const notionPageLinks = useMemo<NotionPageLink[]>(
     () =>
-      documents.flatMap((doc) =>
-        doc.notionPageId
-          ? [
-              {
-                notionPageId: doc.notionPageId,
-                documentId: doc.id,
-                title: doc.title || "Untitled",
-                icon: doc.icon,
-              },
-            ]
-          : [],
-      ),
+      documents.map((doc) => ({
+        notionPageId: doc.notionPageId || doc.id,
+        documentId: doc.id,
+        title: doc.title || "Untitled",
+        icon: doc.icon,
+      })),
     [documents],
   );
   const handleOpenNotionPageLink = useCallback(
@@ -346,6 +398,7 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
       if (saveTimeoutRef.current) {
         clearTimeout(saveTimeoutRef.current);
         saveTimeoutRef.current = null;
+        pendingDocumentSaveRef.current = null;
       }
     }
     if (!isInitializedRef.current) {
@@ -473,6 +526,7 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
       if (saveTimeoutRef.current) {
         clearTimeout(saveTimeoutRef.current);
         saveTimeoutRef.current = null;
+        pendingDocumentSaveRef.current = null;
       }
       setLocalContent(serverContent);
       lastSavedContentRef.current = {
@@ -574,67 +628,69 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
     [document, documentId, queryClient, updateDocument],
   );
 
-  const debouncedSave = useCallback(
-    (title: string, content: string) => {
-      if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);
-      saveTimeoutRef.current = setTimeout(async () => {
-        // Never clobber a newer server version (e.g. an agent edit we haven't
-        // reconciled into the editor yet) with the editor's current — possibly
-        // stale — content. Guard per-field using the field's own watermark.
-        const titleIsStale =
-          !isLinkedLocalSourceDocument &&
-          documentUpdatedAtRef.current &&
-          lastSavedTitleRef.current.updatedAt &&
-          documentUpdatedAtRef.current > lastSavedTitleRef.current.updatedAt;
-        const contentIsStale =
-          !isLinkedLocalSourceDocument &&
-          documentUpdatedAtRef.current &&
-          lastSavedContentRef.current.updatedAt &&
-          documentUpdatedAtRef.current > lastSavedContentRef.current.updatedAt;
-
-        const updates: Record<string, string> = {};
-        if (title !== lastSavedTitleRef.current.title && !titleIsStale)
-          updates.title = title;
-        if (content !== lastSavedContentRef.current.content && !contentIsStale)
-          updates.content = content;
-        if (Object.keys(updates).length === 0) return;
-
-        const saved = await persistDocumentUpdates(updates);
-        // Adopt the server updatedAt per saved field.
-        const savedAt = saved?.updatedAt ?? new Date().toISOString();
-        if (updates.title !== undefined) {
-          lastSavedTitleRef.current = { title, updatedAt: savedAt };
-        }
-        if (updates.content !== undefined) {
-          lastSavedContentRef.current = { content, updatedAt: savedAt };
-        }
+  const saveDocumentImmediately = useCallback(
+    async (title: string, content: string): Promise<DocumentSaveResult> => {
+      // Never clobber a newer server version (e.g. an agent edit we haven't
+      // reconciled into the editor yet) with the editor's current — possibly
+      // stale — content. Guard per-field using the field's own watermark.
+      const titleIsStale =
+        !isLinkedLocalSourceDocument &&
+        documentUpdatedAtRef.current &&
+        lastSavedTitleRef.current.updatedAt &&
+        documentUpdatedAtRef.current > lastSavedTitleRef.current.updatedAt;
+      const contentIsStale =
+        !isLinkedLocalSourceDocument &&
+        documentUpdatedAtRef.current &&
+        lastSavedContentRef.current.updatedAt &&
+        documentUpdatedAtRef.current > lastSavedContentRef.current.updatedAt;
+
+      const updates: Record<string, string> = {};
+      if (title !== lastSavedTitleRef.current.title && !titleIsStale)
+        updates.title = title;
+      const contentChanged = content !== lastSavedContentRef.current.content;
+      if (contentChanged && !contentIsStale) updates.content = content;
+      if (Object.keys(updates).length === 0) {
+        return { contentPersisted: !contentChanged };
+      }
 
-        // Push-on-save: when auto-sync is on, trigger a Notion push
-        // immediately after the save lands in SQL. This eliminates the
-        // off-by-one race where a fixed-interval poll could fire between
-        // the debounce and the next save, reading the previous content.
-        // Pulls remain driven by the polling refetch in useDocumentSyncStatus.
-        if (autoSync) {
-          const status = queryClient.getQueryData<DocumentSyncStatus>([
-            "document-sync",
-            documentId,
-          ]);
-          if (status?.pageId && !status.hasConflict) {
-            try {
-              const res = await fetch(
-                appApiPath(`/api/documents/${documentId}/notion/push`),
-                { method: "POST" },
-              );
-              if (res.ok) {
-                const next = (await res.json()) as DocumentSyncStatus;
-                queryClient.setQueryData(["document-sync", documentId], next);
-              }
-            } catch {
-              // Non-fatal — next polling refetch will surface any error.
+      const saved = await persistDocumentUpdates(updates);
+      // Adopt the server updatedAt per saved field.
+      const savedAt = saved?.updatedAt ?? new Date().toISOString();
+      if (updates.title !== undefined) {
+        lastSavedTitleRef.current = { title, updatedAt: savedAt };
+      }
+      if (updates.content !== undefined) {
+        lastSavedContentRef.current = { content, updatedAt: savedAt };
+      }
+
+      // Push-on-save: when auto-sync is on, trigger a Notion push
+      // immediately after the save lands in SQL. This eliminates the
+      // off-by-one race where a fixed-interval poll could fire between
+      // the debounce and the next save, reading the previous content.
+      // Pulls remain driven by the polling refetch in useDocumentSyncStatus.
+      if (autoSync) {
+        const status = queryClient.getQueryData<DocumentSyncStatus>([
+          "document-sync",
+          documentId,
+        ]);
+        if (status?.pageId && !status.hasConflict) {
+          try {
+            const res = await fetch(
+              appApiPath(`/api/documents/${documentId}/notion/push`),
+              { method: "POST" },
+            );
+            if (res.ok) {
+              const next = (await res.json()) as DocumentSyncStatus;
+              queryClient.setQueryData(["document-sync", documentId], next);
             }
+          } catch {
+            // Non-fatal — next polling refetch will surface any error.
           }
         }
-      }, 500);
+      }
+      return {
+        contentPersisted: !contentChanged || updates.content !== undefined,
+      };
     },
     [
       documentId,
@@ -644,6 +700,37 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
       queryClient,
     ],
   );
+  const debouncedSave = useCallback(
+    (title: string, content: string) => {
+      if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);
+      const pending: PendingDocumentSave = {
+        title,
+        content,
+        save: saveDocumentImmediately,
+        timeout: setTimeout(() => {
+          if (pendingDocumentSaveRef.current === pending) {
+            pendingDocumentSaveRef.current = null;
+          }
+          saveTimeoutRef.current = null;
+          void pending.save(pending.title, pending.content);
+        }, 500),
+      };
+      pendingDocumentSaveRef.current = pending;
+      saveTimeoutRef.current = pending.timeout;
+    },
+    [saveDocumentImmediately],
+  );
+
+  useEffect(() => {
+    return () => {
+      const pending = pendingDocumentSaveRef.current;
+      if (!pending) return;
+      clearTimeout(pending.timeout);
+      saveTimeoutRef.current = null;
+      pendingDocumentSaveRef.current = null;
+      void pending.save(pending.title, pending.content);
+    };
+  }, [documentId]);
 
   // Collab-aware ingest flush: the `pull-document` action writes a one-shot
   // `flush-request-<id>` app-state key when an external agent wants to ingest
@@ -729,6 +816,25 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
     [canEdit, debouncedSave],
   );
 
+  const handleContentSaveNow = useCallback(
+    async (newContent: string) => {
+      if (!canEdit) return false;
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+        saveTimeoutRef.current = null;
+        pendingDocumentSaveRef.current = null;
+      }
+      localContentRef.current = newContent;
+      setLocalContent(newContent);
+      const result = await saveDocumentImmediately(
+        localTitleRef.current,
+        newContent,
+      );
+      return result.contentPersisted;
+    },
+    [canEdit, saveDocumentImmediately],
+  );
+
   // Comments state — pending comment from text selection
   const [pendingComment, setPendingComment] = useState<{
     quotedText: string;
@@ -736,17 +842,19 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
     anchor?: CommentTextAnchor;
     range?: { from: number; to: number };
   } | null>(null);
-  // The thread whose highlight + card are currently focused (click an inline
-  // highlight to focus its card; hover a card to emphasize its highlight).
-  const [activeThreadId, setActiveThreadId] = useState<string | null>(null);
-  const { data: threads } = useComments(
+  const [selectedThreadId, setSelectedThreadId] = useState<string | null>(null);
+  const [hoveredThreadId, setHoveredThreadId] = useState<string | null>(null);
+  const activeThreadId = hoveredThreadId ?? selectedThreadId;
+  const { data: threads, isLoading: commentsLoading } = useComments(
     isLocalFileDocument ? null : documentId,
   );
   const hasComments =
     !isLocalFileDocument &&
     canEdit &&
     ((threads?.length ?? 0) > 0 || !!pendingComment);
-  const isMobile = useIsMobile();
+  const hasCommentRailSpace = useMinViewportWidth(1024);
+  const showDesktopComments = hasComments && hasCommentRailSpace;
+  const showCommentsSheet = hasComments && canEdit && !showDesktopComments;
 
   const handleComment = useCallback(
     (
@@ -756,11 +864,30 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
       range?: { from: number; to: number },
     ) => {
       setPendingComment({ quotedText, offsetTop, anchor, range });
-      setActiveThreadId(null);
+      setSelectedThreadId(null);
+      setHoveredThreadId(null);
     },
     [],
   );
 
+  const clearCommentFocus = useCallback(() => {
+    setSelectedThreadId(null);
+    setHoveredThreadId(null);
+  }, []);
+
+  useEffect(() => {
+    setPendingComment(null);
+    clearCommentFocus();
+  }, [clearCommentFocus, documentId]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") clearCommentFocus();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [clearCommentFocus]);
+
   const focusTitleEnd = useCallback(() => {
     const textarea = titleInputRef.current;
     if (!textarea) return;
@@ -816,6 +943,11 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
     }
   });
 
+  const toolbarBreadcrumbItems = useMemo(
+    () => documentEditorBreadcrumbItems(document, documents),
+    [document, documents],
+  );
+
   if (!isLocalFileDocument && collabLoading) {
     return <DocumentEditorSkeleton />;
   }
@@ -823,11 +955,15 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
   const sidebar = (
     <CommentsSidebar
       documentId={documentId}
+      threads={threads ?? []}
+      isLoading={commentsLoading}
       pendingComment={pendingComment}
       onPendingDone={() => setPendingComment(null)}
       scrollContainerRef={scrollContainerRef}
       activeThreadId={activeThreadId}
-      onActiveThreadChange={setActiveThreadId}
+      selectedThreadId={selectedThreadId}
+      onSelectedThreadChange={setSelectedThreadId}
+      onHoveredThreadChange={setHoveredThreadId}
       currentUserEmail={session?.email}
     />
   );
@@ -850,12 +986,25 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
       <div
         className="relative flex min-h-0 min-w-0 flex-1"
         data-document-print-root
+        onPointerDownCapture={(event) => {
+          const target = event.target as HTMLElement | null;
+          if (
+            target?.closest("[data-comments-sidebar], [data-comment-thread]")
+          ) {
+            return;
+          }
+          clearCommentFocus();
+        }}
       >
         <div className="flex min-h-0 min-w-0 flex-1 flex-col">
           <DocumentToolbar
             documentId={documentId}
             documentTitle={exportTitle}
             documentContent={exportContent}
+            breadcrumbItems={toolbarBreadcrumbItems.map((item) =>
+              item.id === documentId ? { ...item, title: exportTitle } : item,
+            )}
+            documentUpdatedAt={document.updatedAt}
             activeUsers={activeUsers}
             agentPresent={agentPresent}
             agentActive={agentActive}
@@ -875,160 +1024,187 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
             data-document-print-scroll
           >
             <div
-              className={documentEditorTitleRegionClassName(
-                Boolean(document.database),
+              className={cn(
+                "flex min-h-full w-full min-w-0",
+                showDesktopComments ? "justify-center" : "flex-col",
               )}
+              data-document-scroll-content
             >
-              <DatabaseMembershipBreadcrumb
-                document={document}
-                onOpenDatabase={(databaseDocumentId) =>
-                  navigate(`/page/${databaseDocumentId}`, { flushSync: true })
-                }
-              />
-              {document.icon || !isDatabasePage ? (
-                <div className="mb-1">
-                  {canEdit ? (
-                    <EmojiPicker
-                      icon={document.icon}
-                      defaultIcon={defaultIcon}
-                      defaultIconLabel={
-                        defaultIconKind === "database" ? "database" : "page"
-                      }
-                      onSelect={(emoji) => {
-                        void (async () => {
-                          await persistDocumentUpdates({ icon: emoji });
-                        })();
-                      }}
-                    />
-                  ) : document.icon ? (
-                    <div className="p-1 -ml-1 text-5xl leading-none">
-                      {document.icon}
-                    </div>
-                  ) : defaultIconKind === "database" && !isDatabasePage ? (
-                    <div className="-ml-1 flex size-14 items-center justify-center rounded-md text-muted-foreground">
-                      <IconDatabase className="size-12" aria-hidden="true" />
-                    </div>
-                  ) : null}
-                </div>
-              ) : null}
-              <textarea
-                ref={titleInputRef}
-                rows={1}
-                wrap="soft"
-                value={localTitle}
-                onChange={(e) =>
-                  handleTitleChange(normalizeTitleText(e.target.value))
-                }
-                onPaste={handleTitlePaste}
-                onFocus={() => {
-                  titleFocusedRef.current = true;
-                }}
-                onBlur={() => {
-                  titleFocusedRef.current = false;
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") {
-                    e.preventDefault();
-                    const pm = window.document.querySelector(
-                      ".ProseMirror",
-                    ) as HTMLElement | null;
-                    pm?.focus();
-                  }
-                }}
-                aria-label={t("editor.documentTitle")}
-                placeholder={t("editor.title")}
-                readOnly={!canEdit}
-                style={{ fieldSizing: "content" } as any}
+              <div
                 className={cn(
-                  "block w-full resize-none overflow-hidden break-words border-none bg-transparent p-0 font-bold leading-tight text-foreground outline-none placeholder:text-muted-foreground/40",
-                  isDatabasePage ? "text-3xl" : "text-3xl md:text-4xl",
+                  "min-w-0",
+                  showDesktopComments ? "flex-1" : "w-full",
                 )}
-              />
-              {document.databaseMembership && !isLocalFileDocument ? (
-                <DocumentProperties documentId={documentId} canEdit={canEdit} />
-              ) : null}
-            </div>
-            {document.database ? (
-              <div className={documentEditorDatabaseRegionClassName()}>
-                <DocumentDatabase document={document} canEdit={canEdit} />
-              </div>
-            ) : null}
-
-            <div
-              className="flex-1 w-full max-w-3xl mx-auto px-4 pb-16 cursor-text sm:px-8 md:px-16"
-              onClick={(e) => {
-                if (e.target === e.currentTarget) {
-                  const pm = e.currentTarget.querySelector(
-                    ".ProseMirror",
-                  ) as HTMLElement | null;
-                  pm?.focus();
-                }
-              }}
-            >
-              {(() => {
-                // The primary "Content" Blocks field IS the document body, with
-                // the full collaborative editor. It renders chromeless when it's
-                // the only Blocks field, or inside a header/collapsible shell
-                // when the row has multiple Blocks fields.
-                const primaryEditor = (
-                  <VisualEditor
-                    key={documentId}
-                    documentId={documentId}
-                    content={
-                      isLocalFileDocument ? localContent : document.content
-                    }
-                    contentUpdatedAt={
-                      isLocalFileDocument
-                        ? (localContentUpdatedAt ?? document.updatedAt)
-                        : document.updatedAt
+              >
+                <div
+                  className={documentEditorTitleRegionClassName(
+                    Boolean(document.database),
+                  )}
+                >
+                  <DatabaseMembershipBreadcrumb
+                    document={document}
+                    onOpenDatabase={(databaseDocumentId) =>
+                      navigate(`/page/${databaseDocumentId}`, {
+                        flushSync: true,
+                      })
                     }
-                    onChange={handleContentChange}
-                    ydoc={canEdit && !isLocalFileDocument ? ydoc : null}
-                    awareness={
-                      canEdit && !isLocalFileDocument ? awareness : null
-                    }
-                    user={currentUser}
-                    editable={canEdit}
-                    localFileMode={isLocalFileDocument}
-                    onComment={
-                      canEdit && !isLocalFileDocument
-                        ? handleComment
-                        : undefined
-                    }
-                    commentThreads={threads ?? []}
-                    activeThreadId={activeThreadId}
-                    pendingHighlight={pendingComment?.range ?? null}
-                    onActivateThread={
-                      canEdit && !isLocalFileDocument
-                        ? setActiveThreadId
-                        : undefined
+                  />
+                  {document.icon || !isDatabasePage ? (
+                    <div className="mb-1">
+                      {canEdit ? (
+                        <EmojiPicker
+                          icon={document.icon}
+                          defaultIcon={defaultIcon}
+                          defaultIconLabel={
+                            defaultIconKind === "database" ? "database" : "page"
+                          }
+                          onSelect={(emoji) => {
+                            void (async () => {
+                              await persistDocumentUpdates({ icon: emoji });
+                            })();
+                          }}
+                        />
+                      ) : document.icon ? (
+                        <div className="p-1 -ml-1 text-5xl leading-none">
+                          {document.icon}
+                        </div>
+                      ) : defaultIconKind === "database" && !isDatabasePage ? (
+                        <div className="-ml-1 flex size-14 items-center justify-center rounded-md text-muted-foreground">
+                          <IconDatabase
+                            className="size-12"
+                            aria-hidden="true"
+                          />
+                        </div>
+                      ) : null}
+                    </div>
+                  ) : null}
+                  <textarea
+                    ref={titleInputRef}
+                    rows={1}
+                    wrap="soft"
+                    value={localTitle}
+                    onChange={(e) =>
+                      handleTitleChange(normalizeTitleText(e.target.value))
                     }
-                    onJoinTitle={joinFirstBodyBlockToTitle}
-                    notionPageLinks={notionPageLinks}
-                    onOpenNotionPageLink={handleOpenNotionPageLink}
-                    notionPageId={document.notionPageId}
+                    onPaste={handleTitlePaste}
+                    onFocus={() => {
+                      titleFocusedRef.current = true;
+                    }}
+                    onBlur={() => {
+                      titleFocusedRef.current = false;
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        const pm = window.document.querySelector(
+                          ".ProseMirror",
+                        ) as HTMLElement | null;
+                        pm?.focus();
+                      }
+                    }}
+                    aria-label={t("editor.documentTitle")}
+                    placeholder={t("editor.title")}
+                    readOnly={!canEdit}
+                    style={{ fieldSizing: "content" } as any}
+                    className={cn(
+                      "block w-full resize-none overflow-hidden break-words border-none bg-transparent p-0 font-bold leading-tight text-foreground outline-none placeholder:text-muted-foreground/40",
+                      isDatabasePage ? "text-3xl" : "text-3xl md:text-4xl",
+                    )}
                   />
-                );
-
-                // Only database rows have Blocks fields. Standalone pages and
-                // local-file documents keep the plain chromeless body.
-                if (document.databaseMembership && !isLocalFileDocument) {
-                  return (
-                    <DocumentBlockFields
+                  {document.databaseMembership && !isLocalFileDocument ? (
+                    <DocumentProperties
                       documentId={documentId}
                       canEdit={canEdit}
-                      primaryEditor={primaryEditor}
                     />
-                  );
-                }
+                  ) : null}
+                </div>
+                {document.database ? (
+                  <div className={documentEditorDatabaseRegionClassName()}>
+                    <DocumentDatabase document={document} canEdit={canEdit} />
+                  </div>
+                ) : null}
+
+                <div
+                  className="flex-1 w-full max-w-3xl mx-auto px-4 pb-16 cursor-text sm:px-8 md:px-16"
+                  onClick={(e) => {
+                    if (e.target === e.currentTarget) {
+                      const pm = e.currentTarget.querySelector(
+                        ".ProseMirror",
+                      ) as HTMLElement | null;
+                      pm?.focus();
+                    }
+                  }}
+                >
+                  {(() => {
+                    // The primary "Content" Blocks field IS the document body,
+                    // with the full collaborative editor. It renders chromeless
+                    // when it's the only Blocks field, or inside a
+                    // header/collapsible shell when the row has multiple Blocks
+                    // fields.
+                    const primaryEditor = (
+                      <VisualEditor
+                        key={documentId}
+                        documentId={documentId}
+                        content={
+                          isLocalFileDocument ? localContent : document.content
+                        }
+                        contentUpdatedAt={
+                          isLocalFileDocument
+                            ? (localContentUpdatedAt ?? document.updatedAt)
+                            : document.updatedAt
+                        }
+                        onChange={handleContentChange}
+                        onSaveContent={handleContentSaveNow}
+                        ydoc={canEdit && !isLocalFileDocument ? ydoc : null}
+                        awareness={
+                          canEdit && !isLocalFileDocument ? awareness : null
+                        }
+                        user={currentUser}
+                        editable={canEdit}
+                        localFileMode={isLocalFileDocument}
+                        onComment={
+                          canEdit && !isLocalFileDocument
+                            ? handleComment
+                            : undefined
+                        }
+                        commentThreads={threads ?? []}
+                        activeThreadId={activeThreadId}
+                        pendingHighlight={pendingComment?.range ?? null}
+                        onActivateThread={
+                          canEdit && !isLocalFileDocument
+                            ? setSelectedThreadId
+                            : undefined
+                        }
+                        onJoinTitle={joinFirstBodyBlockToTitle}
+                        notionPageLinks={notionPageLinks}
+                        onOpenNotionPageLink={handleOpenNotionPageLink}
+                        notionPageId={document.notionPageId}
+                      />
+                    );
+
+                    // Only database rows have Blocks fields. Standalone pages
+                    // and local-file documents keep the plain chromeless body.
+                    if (document.databaseMembership && !isLocalFileDocument) {
+                      return (
+                        <DocumentBlockFields
+                          documentId={documentId}
+                          canEdit={canEdit}
+                          primaryEditor={primaryEditor}
+                        />
+                      );
+                    }
+
+                    return primaryEditor;
+                  })()}
+                </div>
+              </div>
 
-                return primaryEditor;
-              })()}
+              {showDesktopComments ? sidebar : null}
             </div>
           </div>
         </div>
 
-        {isMobile && canEdit ? (
+        {showCommentsSheet ? (
           <Sheet
             open={hasComments}
             onOpenChange={(open) => {
@@ -1039,9 +1215,7 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
               {sidebar}
             </SheetContent>
           </Sheet>
-        ) : (
-          hasComments && sidebar
-        )}
+        ) : null}
       </div>
     </BlockRegistryProvider>
   );