@agent-native/core 0.77.10 → 0.77.11

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

@@ -21,7 +21,6 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import {
-  useComments,
   useCreateComment,
   useResolveComment,
   type CommentThread,
@@ -88,26 +87,35 @@ function formatDate(dateStr: string) {
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 }
 
+function cssEscape(value: string) {
+  return globalThis.CSS?.escape
+    ? globalThis.CSS.escape(value)
+    : value.replace(/["\\]/g, "\\$&");
+}
+
 /**
- * Y offset (relative to the scroll container's content) of a thread's inline
+ * Y offset (relative to the scroll container's visible viewport) of a thread's inline
  * highlight. Prefers the real decoration element rendered by the
  * CommentHighlight plugin (`[data-comment-thread]`); falls back to a text search
  * by quoted text for legacy/unresolved anchors so older comments still line up.
  */
-function findThreadOffset(
+export function findThreadOffset(
   threadId: string,
   quotedText: string | null,
   scrollContainer: HTMLElement | null,
+  positionContainer: HTMLElement | null = scrollContainer,
 ): number | null {
   if (!scrollContainer) return null;
-  const containerRect = scrollContainer.getBoundingClientRect();
+  const containerRect = (
+    positionContainer ?? scrollContainer
+  ).getBoundingClientRect();
 
   const marked = scrollContainer.querySelector(
-    `[data-comment-thread="${CSS.escape(threadId)}"]`,
+    `[data-comment-thread="${cssEscape(threadId)}"]`,
   ) as HTMLElement | null;
   if (marked) {
     const rect = marked.getBoundingClientRect();
-    return rect.top - containerRect.top + scrollContainer.scrollTop;
+    return rect.top - containerRect.top;
   }
 
   if (!quotedText) return null;
@@ -125,14 +133,46 @@ function findThreadOffset(
       const range = window.document.createRange();
       range.selectNode(node);
       const rect = range.getBoundingClientRect();
-      return rect.top - containerRect.top + scrollContainer.scrollTop;
+      return rect.top - containerRect.top;
     }
   }
   return null;
 }
 
+export function findPendingCommentOffset(
+  scrollContainer: HTMLElement | null,
+  positionContainer: HTMLElement | null = scrollContainer,
+): number | null {
+  if (!scrollContainer) return null;
+  const pending = scrollContainer.querySelector(
+    ".comment-highlight--pending",
+  ) as HTMLElement | null;
+  if (!pending) return null;
+  const containerRect = (
+    positionContainer ?? scrollContainer
+  ).getBoundingClientRect();
+  const rect = pending.getBoundingClientRect();
+  return rect.top - containerRect.top;
+}
+
+export function shouldClearSelectedThreadOnScroll(
+  offset: number | null,
+  containerHeight: number,
+  margin = 40,
+) {
+  return (
+    offset == null || offset < -margin || offset > containerHeight + margin
+  );
+}
+
+export function estimateThreadCardHeight(thread: CommentThread) {
+  return 80 + Math.max(0, thread.comments.length - 1) * 44;
+}
+
 interface CommentsSidebarProps {
   documentId: string;
+  threads?: CommentThread[];
+  isLoading?: boolean;
   pendingComment?: {
     quotedText: string;
     offsetTop: number;
@@ -142,30 +182,36 @@ interface CommentsSidebarProps {
   onPendingDone?: () => void;
   scrollContainerRef?: RefObject<HTMLDivElement | null>;
   activeThreadId?: string | null;
-  onActiveThreadChange?: (id: string | null) => void;
+  selectedThreadId?: string | null;
+  onSelectedThreadChange?: (id: string | null) => void;
+  onHoveredThreadChange?: (id: string | null) => void;
   currentUserEmail?: string;
 }
 
 export function CommentsSidebar({
   documentId,
+  threads = [],
+  isLoading = false,
   pendingComment,
   onPendingDone,
   scrollContainerRef,
   activeThreadId,
-  onActiveThreadChange,
+  selectedThreadId,
+  onSelectedThreadChange,
+  onHoveredThreadChange,
   currentUserEmail,
 }: CommentsSidebarProps) {
   const t = useT();
-  const { data: threads, isLoading } = useComments(documentId);
   const { data: members = [] } = useMentionMembers();
   const createComment = useCreateComment();
   const resolveComment = useResolveComment();
-  const [expandedThread, setExpandedThread] = useState<string | null>(null);
+  const [replyingThreadId, setReplyingThreadId] = useState<string | null>(null);
   const [replyText, setReplyText] = useState("");
   const [replyMentions, setReplyMentions] = useState<MentionEntry[]>([]);
   const [pendingText, setPendingText] = useState("");
   const [pendingMentions, setPendingMentions] = useState<MentionEntry[]>([]);
   const [showResolved, setShowResolved] = useState(false);
+  const sidebarRef = useRef<HTMLDivElement>(null);
   const pendingInputRef = useRef<HTMLTextAreaElement>(null);
 
   const openThreads = useMemo(
@@ -225,7 +271,7 @@ export function CommentsSidebar({
     });
     setReplyText("");
     setReplyMentions([]);
-    setExpandedThread(null);
+    setReplyingThreadId(null);
   };
 
   const handleSendToAI = (thread: CommentThread) => {
@@ -246,25 +292,52 @@ export function CommentsSidebar({
   const [threadOffsets, setThreadOffsets] = useState<Map<string, number>>(
     new Map(),
   );
+  const [threadCardHeights, setThreadCardHeights] = useState<
+    Map<string, number>
+  >(new Map());
+  const [pendingOffset, setPendingOffset] = useState<number | null>(null);
   const openThreadKey = openThreads
     .map((t) => `${t.threadId}:${t.quotedText ?? ""}`)
     .join(",");
 
+  const handleThreadCardHeightChange = useCallback(
+    (threadId: string, height: number) => {
+      setThreadCardHeights((prev) => {
+        if (prev.get(threadId) === height) return prev;
+        const next = new Map(prev);
+        next.set(threadId, height);
+        return next;
+      });
+    },
+    [],
+  );
+
   const recomputeOffsets = useCallback(() => {
     const container = scrollContainerRef?.current ?? null;
     if (!container || openThreads.length === 0) {
       setThreadOffsets((prev) => (prev.size === 0 ? prev : new Map()));
+      setPendingOffset((prev) => {
+        const next = pendingComment
+          ? findPendingCommentOffset(container, sidebarRef.current ?? container)
+          : null;
+        return prev === next ? prev : next;
+      });
       return;
     }
+    const positionContainer = sidebarRef.current ?? container;
     const offsets = new Map<string, number>();
     for (const thread of openThreads) {
       const offset = findThreadOffset(
         thread.threadId,
         thread.quotedText,
         container,
+        positionContainer,
       );
       if (offset != null) offsets.set(thread.threadId, offset);
     }
+    const nextPendingOffset = pendingComment
+      ? findPendingCommentOffset(container, positionContainer)
+      : null;
     setThreadOffsets((prev) => {
       if (
         prev.size === offsets.size &&
@@ -274,7 +347,28 @@ export function CommentsSidebar({
       }
       return offsets;
     });
-  }, [openThreads, scrollContainerRef]);
+    setPendingOffset((prev) =>
+      prev === nextPendingOffset ? prev : nextPendingOffset,
+    );
+    if (
+      selectedThreadId &&
+      shouldClearSelectedThreadOnScroll(
+        offsets.get(selectedThreadId) ?? null,
+        container.clientHeight,
+      )
+    ) {
+      onSelectedThreadChange?.(null);
+      setReplyingThreadId(null);
+      setReplyText("");
+      setReplyMentions([]);
+    }
+  }, [
+    openThreads,
+    onSelectedThreadChange,
+    pendingComment,
+    scrollContainerRef,
+    selectedThreadId,
+  ]);
 
   useEffect(() => {
     const container = scrollContainerRef?.current ?? null;
@@ -294,34 +388,46 @@ export function CommentsSidebar({
       subtree: true,
       characterData: true,
     });
+    container.addEventListener("scroll", schedule, { passive: true });
     window.addEventListener("resize", schedule);
 
     return () => {
       cancelAnimationFrame(raf);
       observer.disconnect();
+      container.removeEventListener("scroll", schedule);
       window.removeEventListener("resize", schedule);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [openThreadKey, recomputeOffsets]);
+  }, [openThreadKey, pendingComment, recomputeOffsets]);
 
-  // When a thread is activated (e.g. its highlight was clicked), expand it and
-  // scroll its card into view.
   useEffect(() => {
-    if (!activeThreadId) return;
-    if (!openThreads.some((t) => t.threadId === activeThreadId)) return;
-    setExpandedThread(activeThreadId);
-    const card = window.document.querySelector(
-      `[data-thread-card="${CSS.escape(activeThreadId)}"]`,
-    );
-    card?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }, [activeThreadId, openThreads]);
+    const openIds = new Set(openThreads.map((thread) => thread.threadId));
+    setThreadCardHeights((prev) => {
+      if ([...prev.keys()].every((threadId) => openIds.has(threadId))) {
+        return prev;
+      }
+      const next = new Map<string, number>();
+      for (const [threadId, height] of prev) {
+        if (openIds.has(threadId)) next.set(threadId, height);
+      }
+      return next;
+    });
+  }, [openThreads]);
 
-  // Surface the resolved list automatically when there's nothing open to show.
   useEffect(() => {
-    if (openThreads.length === 0 && !pendingComment && resolvedThreads.length) {
-      setShowResolved(true);
+    if (!selectedThreadId) return;
+    if (!openThreads.some((t) => t.threadId === selectedThreadId)) {
+      onSelectedThreadChange?.(null);
+      setReplyingThreadId(null);
+      setReplyText("");
+      setReplyMentions([]);
+      return;
     }
-  }, [openThreads.length, pendingComment, resolvedThreads.length]);
+    const card = window.document.querySelector(
+      `[data-thread-card="${cssEscape(selectedThreadId)}"]`,
+    );
+    card?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [onSelectedThreadChange, selectedThreadId, openThreads]);
 
   const hasContent =
     openThreads.length > 0 || !!pendingComment || resolvedThreads.length > 0;
@@ -346,7 +452,10 @@ export function CommentsSidebar({
           ? 0
           : 12;
     items.push({ thread, marginTop });
-    cursor += marginTop + 80 + (thread.comments.length - 1) * 44;
+    cursor +=
+      marginTop +
+      (threadCardHeights.get(thread.threadId) ??
+        estimateThreadCardHeight(thread));
   }
 
   const handleResolve = (thread: CommentThread) => {
@@ -355,7 +464,12 @@ export function CommentsSidebar({
       documentId,
       resolved: true,
     });
-    if (activeThreadId === thread.threadId) onActiveThreadChange?.(null);
+    if (selectedThreadId === thread.threadId) onSelectedThreadChange?.(null);
+    if (replyingThreadId === thread.threadId) {
+      setReplyingThreadId(null);
+      setReplyText("");
+      setReplyMentions([]);
+    }
   };
 
   const handleReopen = (thread: CommentThread) => {
@@ -367,12 +481,16 @@ export function CommentsSidebar({
   };
 
   return (
-    <div className="w-80 shrink-0 overflow-auto relative">
+    <div
+      ref={sidebarRef}
+      className="relative w-80 shrink-0 pb-16"
+      data-comments-sidebar
+    >
       {/* Pending new comment — positioned at the selection Y offset */}
       {pendingComment && (
         <div
           className="absolute left-2 right-4 rounded-lg bg-popover p-3 shadow-md ring-1 ring-border/50 z-10"
-          style={{ top: pendingComment.offsetTop }}
+          style={{ top: pendingOffset ?? pendingComment.offsetTop }}
         >
           <CommentComposer
             ref={pendingInputRef}
@@ -383,11 +501,6 @@ export function CommentsSidebar({
             onEscape={() => {
               if (!pendingText.trim()) handlePendingCancel();
             }}
-            onBlur={() => {
-              setTimeout(() => {
-                if (!pendingText.trim()) handlePendingCancel();
-              }, 200);
-            }}
             members={members}
             placeholder={t("comments.add")}
             autoFocus
@@ -417,25 +530,28 @@ export function CommentsSidebar({
           thread={thread}
           marginTop={marginTop}
           isActive={activeThreadId === thread.threadId}
-          isExpanded={expandedThread === thread.threadId}
-          replyText={expandedThread === thread.threadId ? replyText : ""}
+          isExpanded={replyingThreadId === thread.threadId}
+          replyText={replyingThreadId === thread.threadId ? replyText : ""}
           onHoverChange={(hovered) =>
-            onActiveThreadChange?.(hovered ? thread.threadId : null)
+            onHoveredThreadChange?.(hovered ? thread.threadId : null)
           }
           onExpand={() => {
-            setExpandedThread(
-              expandedThread === thread.threadId ? null : thread.threadId,
+            onSelectedThreadChange?.(thread.threadId);
+            setReplyingThreadId((current) =>
+              current === thread.threadId ? null : thread.threadId,
             );
             setReplyText("");
             setReplyMentions([]);
           }}
           onCollapse={() => {
-            setExpandedThread(null);
+            setReplyingThreadId(null);
+            onSelectedThreadChange?.(null);
             setReplyText("");
             setReplyMentions([]);
           }}
           onReplyChange={setReplyText}
           onReplyMentionAdd={(m) => setReplyMentions((prev) => [...prev, m])}
+          onHeightChange={handleThreadCardHeightChange}
           members={members}
           onSubmitReply={() => handleReply(thread.threadId)}
           onResolve={() => handleResolve(thread)}
@@ -487,6 +603,7 @@ function ThreadView({
   onCollapse,
   onReplyChange,
   onReplyMentionAdd,
+  onHeightChange,
   onSubmitReply,
   onResolve,
   onSendToAI,
@@ -503,12 +620,14 @@ function ThreadView({
   onCollapse: () => void;
   onReplyChange: (text: string) => void;
   onReplyMentionAdd: (entry: MentionEntry) => void;
+  onHeightChange: (threadId: string, height: number) => void;
   onSubmitReply: () => void;
   onResolve: () => void;
   onSendToAI: () => void;
   t: ReturnType<typeof useT>;
 }) {
   const replyInputRef = useRef<HTMLTextAreaElement>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (isExpanded) {
@@ -516,8 +635,22 @@ function ThreadView({
     }
   }, [isExpanded]);
 
+  useEffect(() => {
+    const element = cardRef.current;
+    if (!element) return;
+    const updateHeight = () => {
+      onHeightChange(thread.threadId, element.getBoundingClientRect().height);
+    };
+    updateHeight();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [onHeightChange, thread.threadId]);
+
   return (
     <div
+      ref={cardRef}
       data-thread-card={thread.threadId}
       className={`group/thread mx-2 mr-4 rounded-lg bg-popover shadow-md cursor-pointer transition-shadow ${
         isActive
@@ -586,7 +719,7 @@ function ThreadView({
         ))}
       </div>
 
-      {/* Expanded: Notion-style reply input — collapses on blur */}
+      {/* Expanded: Notion-style reply input */}
       {isExpanded && (
         <div
           className="flex items-center gap-2 px-3 pb-3 pt-1"
@@ -610,11 +743,6 @@ function ThreadView({
               onMentionAdd={onReplyMentionAdd}
               onSubmit={onSubmitReply}
               onEscape={onCollapse}
-              onBlur={() => {
-                setTimeout(() => {
-                  if (!replyText.trim()) onCollapse();
-                }, 200);
-              }}
               members={members}
               placeholder={t("comments.reply")}
               rows={1}