feat: enhance comments (#1980)

* feat: non-inline comments support

* enhance comments

* fix types

apps/client/src/features/comment/components/comment-dialog.tsx

@@ -15,7 +15,6 @@ import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-
 import { useEditor } from "@tiptap/react";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { useTranslation } from "react-i18next";
-import { useQueryEmit } from "@/features/websocket/use-query-emit";
 
 interface CommentDialogProps {
   editor: ReturnType<typeof useEditor>;
@@ -37,8 +36,6 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
   const createCommentMutation = useCreateCommentMutation();
   const { isPending } = createCommentMutation;
 
-  const emit = useQueryEmit();
-
   const handleDialogClose = () => {
     setShowCommentPopup(false);
     editor.chain().focus().unsetCommentDecoration().run();
@@ -82,10 +79,6 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
         );
       }, 400);
 
-      emit({
-        operation: "invalidateComment",
-        pageId: pageId,
-      });
     } finally {
       setShowCommentPopup(false);
       setDraftCommentId("");

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

@@ -2,7 +2,7 @@ import { Group, Text, Box, Badge } from "@mantine/core";
 import React, { useEffect, useRef, useState } from "react";
 import classes from "./comment.module.css";
 import { useAtom, useAtomValue } from "jotai";
-import { timeAgo } from "@/lib/time";
+import { useTimeAgo } from "@/hooks/use-time-ago";
 import CommentEditor from "@/features/comment/components/comment-editor";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
 import CommentActions from "@/features/comment/components/comment-actions";
@@ -18,7 +18,6 @@ import { useResolveCommentMutation } from "@/ee/comment/queries/comment-query";
 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";
 import { useTranslation } from "react-i18next";
 
 interface CommentListItemProps {
@@ -45,8 +44,8 @@ function CommentListItem({
   const deleteCommentMutation = useDeleteCommentMutation(comment.pageId);
   const resolveCommentMutation = useResolveCommentMutation();
   const [currentUser] = useAtom(currentUserAtom);
-  const emit = useQueryEmit();
   const isCloudEE = useIsCloudEE();
+  const createdAtAgo = useTimeAgo(comment.createdAt);
 
   useEffect(() => {
     setContent(comment.content);
@@ -65,11 +64,6 @@ function CommentListItem({
         editContentRef.current = null;
       }
       setIsEditing(false);
-
-      emit({
-        operation: "invalidateComment",
-        pageId: pageId,
-      });
     } catch (error) {
       console.error("Failed to update comment:", error);
     } finally {
@@ -81,11 +75,6 @@ function CommentListItem({
     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);
     }
@@ -106,11 +95,6 @@ function CommentListItem({
       if (editor) {
         editor.commands.setCommentResolved(comment.id, !isResolved);
       }
-
-      emit({
-        operation: "invalidateComment",
-        pageId: pageId,
-      });
     } catch (error) {
       console.error("Failed to toggle resolved state:", error);
     }
@@ -177,7 +161,7 @@ function CommentListItem({
 
           <Group gap="xs">
             <Text size="xs" fw={500} c="dimmed">
-              {timeAgo(comment.createdAt)}
+              {createdAtAgo}
             </Text>
           </Group>
         </div>

apps/client/src/features/comment/components/comment-list-with-tabs.tsx

@@ -14,7 +14,6 @@ import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { IPagination } from "@/lib/types.ts";
 import { extractPageSlugId } from "@/lib";
 import { useTranslation } from "react-i18next";
-import { useQueryEmit } from "@/features/websocket/use-query-emit";
 import { useIsCloudEE } from "@/hooks/use-is-cloud-ee";
 import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
 import { IconArrowUp, IconMessageOff } from "@tabler/icons-react";
@@ -27,10 +26,9 @@ function CommentListWithTabs() {
     data: comments,
     isLoading: isCommentsLoading,
     isError,
-  } = useCommentsQuery({ pageId: page?.id, limit: 100 });
+  } = useCommentsQuery({ pageId: page?.id });
   const createCommentMutation = useCreateCommentMutation();
   const [isLoading, setIsLoading] = useState(false);
-  const emit = useQueryEmit();
   const isCloudEE = useIsCloudEE();
   const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
 
@@ -67,11 +65,6 @@ function CommentListWithTabs() {
           content: JSON.stringify(content),
         });
 
-        emit({
-          operation: "invalidateComment",
-          pageId: page?.id,
-        });
-
         setTimeout(() => {
           const selector = `div[data-comment-id="${createdComment.id}"]`;
           const commentElement = document.querySelector(selector);
@@ -97,11 +90,6 @@ function CommentListWithTabs() {
         };
 
         await createCommentMutation.mutateAsync(commentData);
-
-        emit({
-          operation: "invalidateComment",
-          pageId: page?.id,
-        });
       } catch (error) {
         console.error("Failed to post comment:", error);
       } finally {