fix ui

apps/client/public/locales/en-US/translation.json

@@ -208,6 +208,9 @@
   "Reply...": "Reply...",
   "Error loading comments.": "Error loading comments.",
   "No comments yet.": "No comments yet.",
+  "No open comments.": "No open comments.",
+  "No resolved comments.": "No resolved comments.",
+  "Add a comment...": "Add a comment...",
   "Edit comment": "Edit comment",
   "Delete comment": "Delete comment",
   "Are you sure you want to delete this comment?": "Are you sure you want to delete this comment?",

apps/client/src/components/common/avatar-uploader.tsx

@@ -130,7 +130,7 @@ export default function AvatarUploader({
                   top: "50%",
                   left: "50%",
                   transform: "translate(-50%, -50%)",
-                  zIndex: 1000,
+                  zIndex: 200,
                 }}
               >
                 <Loader size="sm" />

apps/client/src/components/layouts/global/aside.tsx

@@ -31,7 +31,7 @@ export default function Aside() {
   }
 
   return (
-    <Box p="md">
+    <Box p="md" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
       {component && (
         <>
           <Text mb="md" fw={500}>

apps/client/src/ee/ai/components/editor/ai-menu/ai-menu.tsx

@@ -271,7 +271,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
   return createPortal(
     <div
       style={{
-        zIndex: 200,
+        zIndex: 199,
         position: "absolute",
         top: menuPlacement.top,
         left: menuPlacement.left,

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

@@ -56,6 +56,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
         pageId: pageId,
         content: JSON.stringify(comment),
         selection: selectedText,
+        type: "inline",
       };
 
       const createdComment =
@@ -103,6 +104,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
       size="lg"
       radius="md"
       w={300}
+      zIndex={180}
       position={{ bottom: 500, right: 50 }}
       withCloseButton
       withBorder

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useCallback, memo, useMemo } from "react";
 import { useParams } from "react-router-dom";
-import { Divider, Paper, 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,
@@ -17,6 +17,7 @@ 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";
 
 function CommentListWithTabs() {
   const { t } = useTranslation();
@@ -55,6 +56,36 @@ function CommentListWithTabs() {
     return { activeComments: active, resolvedComments: resolved };
   }, [comments]);
 
+  const [isPageCommentLoading, setIsPageCommentLoading] = useState(false);
+
+  const handleAddPageComment = useCallback(
+    async (_commentId: string, content: string) => {
+      try {
+        setIsPageCommentLoading(true);
+        const createdComment = await createCommentMutation.mutateAsync({
+          pageId: page?.id,
+          content: JSON.stringify(content),
+        });
+
+        emit({
+          operation: "invalidateComment",
+          pageId: page?.id,
+        });
+
+        setTimeout(() => {
+          const selector = `div[data-comment-id="${createdComment.id}"]`;
+          const commentElement = document.querySelector(selector);
+          commentElement?.scrollIntoView({ behavior: "smooth", block: "center" });
+        }, 400);
+      } catch (error) {
+        console.error("Failed to post comment:", error);
+      } finally {
+        setIsPageCommentLoading(false);
+      }
+    },
+    [createCommentMutation, page?.id],
+  );
+
   const handleAddReply = useCallback(
     async (commentId: string, content: string) => {
       try {
@@ -132,70 +163,76 @@ function CommentListWithTabs() {
 
   const totalComments = activeComments.length + resolvedComments.length;
 
+  const pageCommentInput = canComment ? (
+    <PageCommentInput
+      onSave={handleAddPageComment}
+      isLoading={isPageCommentLoading}
+    />
+  ) : null;
+
   // If not cloud/enterprise, show simple list without tabs
   if (!isCloudEE) {
-    if (totalComments === 0) {
-      return <>{t("No comments yet.")}</>;
-    }
-
     return (
-      <ScrollArea style={{ height: "85vh" }} scrollbarSize={5} type="scroll">
-        <div style={{ paddingBottom: "200px" }}>
-          {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}
+      <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}
                     />
-                  </>
-                )}
-              </Paper>
-            ))}
-        </div>
-      </ScrollArea>
+                    <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={{
-        height: "85vh",
+        flex: 1,
+        minHeight: 0,
         display: "flex",
         flexDirection: "column",
-        marginTop: "-15px",
       }}
     >
-      <Tabs defaultValue="open" variant="default" style={{ flex: "0 0 auto" }}>
+      <Tabs defaultValue="open" variant="default" style={{ flex: "1 1 auto", display: "flex", flexDirection: "column", overflow: "hidden" }}>
         <Tabs.List justify="center">
           <Tabs.Tab
             value="open"
@@ -220,16 +257,21 @@ function CommentListWithTabs() {
         </Tabs.List>
 
         <ScrollArea
-          style={{ flex: "1 1 auto", height: "calc(85vh - 60px)" }}
+          style={{ flex: "1 1 auto" }}
           scrollbarSize={5}
           type="scroll"
         >
-          <div style={{ paddingBottom: "200px" }}>
+          <div style={{ paddingBottom: "8px" }}>
             <Tabs.Panel value="open" pt="xs">
               {activeComments.length === 0 ? (
-                <Text size="sm" c="dimmed" ta="center" py="md">
-                  {t("No open comments.")}
-                </Text>
+                <Center py="xl">
+                  <Stack align="center" gap="xs">
+                    <IconMessageOff size={32} stroke={1.5} color="var(--mantine-color-dimmed)" />
+                    <Text size="sm" c="dimmed">
+                      {t("No open comments.")}
+                    </Text>
+                  </Stack>
+                </Center>
               ) : (
                 activeComments.map(renderComments)
               )}
@@ -237,16 +279,23 @@ function CommentListWithTabs() {
 
             <Tabs.Panel value="resolved" pt="xs">
               {resolvedComments.length === 0 ? (
-                <Text size="sm" c="dimmed" ta="center" py="md">
-                  {t("No resolved comments.")}
-                </Text>
+                <Center py="xl">
+                  <Stack align="center" gap="xs">
+                    <IconMessageOff size={32} stroke={1.5} color="var(--mantine-color-dimmed)" />
+                    <Text size="sm" c="dimmed">
+                      {t("No resolved comments.")}
+                    </Text>
+                  </Stack>
+                </Center>
               ) : (
                 resolvedComments.map(renderComments)
               )}
             </Tabs.Panel>
+
           </div>
         </ScrollArea>
       </Tabs>
+      {pageCommentInput}
     </div>
   );
 }
@@ -298,7 +347,7 @@ const ChildComments = ({
 
 const MemoizedChildComments = memo(ChildComments);
 
-const CommentEditorWithActions = ({ commentId, onSave, isLoading }) => {
+const CommentEditorWithActions = ({ commentId, onSave, isLoading, placeholder = undefined }) => {
   const [content, setContent] = useState("");
   const { ref, focused } = useFocusWithin();
   const commentEditorRef = useRef(null);
@@ -316,10 +365,48 @@ const CommentEditorWithActions = ({ commentId, onSave, isLoading }) => {
         onUpdate={setContent}
         onSave={handleSave}
         editable={true}
+        placeholder={placeholder}
       />
       {focused && <CommentActions onSave={handleSave} isLoading={isLoading} />}
     </div>
   );
 };
 
+const PageCommentInput = ({ onSave, isLoading }) => {
+  const { t } = useTranslation();
+  const [content, setContent] = useState("");
+  const { ref, focused } = useFocusWithin();
+  const commentEditorRef = useRef(null);
+
+  const handleSave = useCallback(() => {
+    onSave(null, content);
+    setContent("");
+    commentEditorRef.current?.clearContent();
+  }, [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" }}>
+      <CommentEditor
+        ref={commentEditorRef}
+        onUpdate={setContent}
+        onSave={handleSave}
+        editable={true}
+        placeholder={t("Add a comment...")}
+      />
+      {focused && (
+        <ActionIcon
+          variant="filled"
+          radius="xl"
+          size="sm"
+          onClick={handleSave}
+          loading={isLoading}
+          style={{ position: "absolute", right: 8, bottom: 30 }}
+        >
+          <IconArrowUp size={16} />
+        </ActionIcon>
+      )}
+    </div>
+  );
+};
+
 export default CommentListWithTabs;

apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx

@@ -164,7 +164,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   return (
     <BubbleMenu
       {...bubbleMenuProps}
-      style={{ zIndex: 200, position: "relative" }}
+      style={{ zIndex: 199, position: "relative" }}
     >
       <div className={classes.bubbleMenu}>
         {isGenerativeAiEnabled && (

apps/client/src/features/editor/components/mention/mention-suggestion.ts

@@ -106,7 +106,7 @@ const mentionRenderItems = () => {
               left: `${x}px`,
               top: `${y}px`,
               position: "absolute",
-              zIndex: "100",
+              zIndex: "190",
             });
           });
         },

apps/server/src/core/comment/comment.service.ts

@@ -66,8 +66,8 @@ export class CommentService {
     const comment = await this.commentRepo.insertComment({
       pageId: page.id,
       content: commentContent,
-      selection: createCommentDto?.selection?.substring(0, 250),
-      type: 'inline',
+      selection: createCommentDto?.selection?.substring(0, 250) ?? null,
+      type: createCommentDto.type ?? 'page',
       parentCommentId: createCommentDto?.parentCommentId,
       creatorId: userId,
       workspaceId: workspaceId,

apps/server/src/core/comment/dto/create-comment.dto.ts

@@ -1,4 +1,4 @@
-import { IsJSON, IsOptional, IsString, IsUUID } from 'class-validator';
+import { IsIn, IsJSON, IsOptional, IsString, IsUUID } from 'class-validator';
 
 export class CreateCommentDto {
   @IsString()
@@ -11,6 +11,10 @@ export class CreateCommentDto {
   @IsString()
   selection: string;
 
+  @IsOptional()
+  @IsIn(['inline', 'page'])
+  type: string;
+
   @IsOptional()
   @IsUUID()
   parentCommentId: string;