feat: realtime comments (#1144)

* init

* fix: close bubblemenu after comment and wait before scroll

* scroll to comment when click

* highlight comment animation

apps/client/src/features/comment/components/comment-list-item.tsx

@@ -1,5 +1,5 @@
 import { Group, Text, Box } from "@mantine/core";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import classes from "./comment.module.css";
 import { useAtom, useAtomValue } from "jotai";
 import { timeAgo } from "@/lib/time";
@@ -15,12 +15,14 @@ import {
 import { IComment } from "@/features/comment/types/comment.types";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { useQueryEmit } from "@/features/websocket/use-query-emit";
 
 interface CommentListItemProps {
   comment: IComment;
+  pageId: string;
 }
 
-function CommentListItem({ comment }: CommentListItemProps) {
+function CommentListItem({ comment, pageId }: CommentListItemProps) {
   const { hovered, ref } = useHover();
   const [isEditing, setIsEditing] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -29,6 +31,11 @@ function CommentListItem({ comment }: CommentListItemProps) {
   const updateCommentMutation = useUpdateCommentMutation();
   const deleteCommentMutation = useDeleteCommentMutation(comment.pageId);
   const [currentUser] = useAtom(currentUserAtom);
+  const emit = useQueryEmit();
+
+  useEffect(() => {
+    setContent(comment.content)
+  }, [comment]);
 
   async function handleUpdateComment() {
     try {
@@ -39,6 +46,11 @@ function CommentListItem({ comment }: CommentListItemProps) {
       };
       await updateCommentMutation.mutateAsync(commentToUpdate);
       setIsEditing(false);
+
+      emit({
+        operation: "invalidateComment",
+        pageId: pageId,
+      });
     } catch (error) {
       console.error("Failed to update comment:", error);
     } finally {
@@ -50,11 +62,27 @@ function CommentListItem({ comment }: CommentListItemProps) {
     try {
       await deleteCommentMutation.mutateAsync(comment.id);
       editor?.commands.unsetComment(comment.id);
+
+      emit({
+        operation: "invalidateComment",
+        pageId: pageId,
+      });
     } catch (error) {
       console.error("Failed to delete comment:", error);
     }
   }
 
+  function handleCommentClick(comment: IComment) {
+    const el = document.querySelector(`.comment-mark[data-comment-id="${comment.id}"]`);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+      el.classList.add("comment-highlight");
+      setTimeout(() => {
+        el.classList.remove("comment-highlight");
+      }, 3000);
+    }
+  }
+
   function handleEditToggle() {
     setIsEditing(true);
   }
@@ -99,7 +127,7 @@ function CommentListItem({ comment }: CommentListItemProps) {
 
       <div>
         {!comment.parentCommentId && comment?.selection && (
-          <Box className={classes.textSelection}>
+          <Box className={classes.textSelection} onClick={() => handleCommentClick(comment)}>
             <Text size="sm">{comment?.selection}</Text>
           </Box>
         )}