comments view

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

@@ -1,6 +1,17 @@
 import React, { useState, useRef, useCallback, memo, useMemo } from "react";
 import { useParams } from "react-router-dom";
-import { ActionIcon, Center, Divider, Group, Paper, Stack, Tabs, Badge, Text, ScrollArea } from "@mantine/core";
+import {
+  ActionIcon,
+  Center,
+  Divider,
+  Group,
+  Paper,
+  Stack,
+  Tabs,
+  Badge,
+  Text,
+  ScrollArea,
+} from "@mantine/core";
 import CommentListItem from "@/features/comment/components/comment-list-item";
 import {
   useCommentsQuery,
@@ -29,7 +40,6 @@ function CommentListWithTabs() {
   } = useCommentsQuery({ pageId: page?.id });
   const createCommentMutation = useCreateCommentMutation();
   const [isLoading, setIsLoading] = useState(false);
-  const isCloudEE = useIsCloudEE();
   const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
 
   const canComment = page?.permissions?.canEdit ?? false;
@@ -68,7 +78,10 @@ function CommentListWithTabs() {
         setTimeout(() => {
           const selector = `div[data-comment-id="${createdComment.id}"]`;
           const commentElement = document.querySelector(selector);
-          commentElement?.scrollIntoView({ behavior: "smooth", block: "center" });
+          commentElement?.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+          });
         }, 400);
       } catch (error) {
         console.error("Failed to post comment:", error);
@@ -158,59 +171,6 @@ function CommentListWithTabs() {
     />
   ) : null;
 
-  // If not cloud/enterprise, show simple list without tabs
-  if (!isCloudEE) {
-    return (
-      <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
-        <ScrollArea style={{ flex: "1 1 auto" }} scrollbarSize={5} type="scroll">
-          <div style={{ paddingBottom: "8px" }}>
-            {comments?.items
-              .filter((comment: IComment) => comment.parentCommentId === null)
-              .map((comment) => (
-                <Paper
-                  shadow="sm"
-                  radius="md"
-                  p="sm"
-                  mb="sm"
-                  withBorder
-                  key={comment.id}
-                  data-comment-id={comment.id}
-                >
-                  <div>
-                    <CommentListItem
-                      comment={comment}
-                      pageId={page?.id}
-                      canComment={canComment}
-                      userSpaceRole={space?.membership?.role}
-                    />
-                    <MemoizedChildComments
-                      comments={comments}
-                      parentId={comment.id}
-                      pageId={page?.id}
-                      canComment={canComment}
-                      userSpaceRole={space?.membership?.role}
-                    />
-                  </div>
-
-                  {canComment && (
-                    <>
-                      <Divider my={4} />
-                      <CommentEditorWithActions
-                        commentId={comment.id}
-                        onSave={handleAddReply}
-                        isLoading={isLoading}
-                      />
-                    </>
-                  )}
-                </Paper>
-              ))}
-          </div>
-        </ScrollArea>
-        {pageCommentInput}
-      </div>
-    );
-  }
-
   return (
     <div
       style={{
@@ -220,7 +180,16 @@ function CommentListWithTabs() {
         flexDirection: "column",
       }}
     >
-      <Tabs defaultValue="open" variant="default" style={{ flex: "1 1 auto", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+      <Tabs
+        defaultValue="open"
+        variant="default"
+        style={{
+          flex: "1 1 auto",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+        }}
+      >
         <Tabs.List justify="center">
           <Tabs.Tab
             value="open"
@@ -254,7 +223,11 @@ function CommentListWithTabs() {
               {activeComments.length === 0 ? (
                 <Center py="xl">
                   <Stack align="center" gap="xs">
-                    <IconMessageOff size={32} stroke={1.5} color="var(--mantine-color-dimmed)" />
+                    <IconMessageOff
+                      size={32}
+                      stroke={1.5}
+                      color="var(--mantine-color-dimmed)"
+                    />
                     <Text size="sm" c="dimmed">
                       {t("No open comments.")}
                     </Text>
@@ -269,7 +242,11 @@ function CommentListWithTabs() {
               {resolvedComments.length === 0 ? (
                 <Center py="xl">
                   <Stack align="center" gap="xs">
-                    <IconMessageOff size={32} stroke={1.5} color="var(--mantine-color-dimmed)" />
+                    <IconMessageOff
+                      size={32}
+                      stroke={1.5}
+                      color="var(--mantine-color-dimmed)"
+                    />
                     <Text size="sm" c="dimmed">
                       {t("No resolved comments.")}
                     </Text>
@@ -279,7 +256,6 @@ function CommentListWithTabs() {
                 resolvedComments.map(renderComments)
               )}
             </Tabs.Panel>
-
           </div>
         </ScrollArea>
       </Tabs>
@@ -335,7 +311,12 @@ const ChildComments = ({
 
 const MemoizedChildComments = memo(ChildComments);
 
-const CommentEditorWithActions = ({ commentId, onSave, isLoading, placeholder = undefined }) => {
+const CommentEditorWithActions = ({
+  commentId,
+  onSave,
+  isLoading,
+  placeholder = undefined,
+}) => {
   const [content, setContent] = useState("");
   const { ref, focused } = useFocusWithin();
   const commentEditorRef = useRef(null);
@@ -373,7 +354,16 @@ const PageCommentInput = ({ onSave, isLoading }) => {
   }, [content, onSave]);
 
   return (
-    <div ref={ref} style={{ flex: "0 0 auto", borderTop: "1px solid var(--mantine-color-default-border)", paddingTop: "var(--mantine-spacing-sm)", paddingBottom: 25, position: "relative" }}>
+    <div
+      ref={ref}
+      style={{
+        flex: "0 0 auto",
+        borderTop: "1px solid var(--mantine-color-default-border)",
+        paddingTop: "var(--mantine-spacing-sm)",
+        paddingBottom: 25,
+        position: "relative",
+      }}
+    >
       <CommentEditor
         ref={commentEditorRef}
         onUpdate={setContent}