sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-05-08 07:13:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

comments view

Browse Source
This commit is contained in:
Philipinho
2026-03-02 22:18:57 +00:00
parent b1510cd6d7
commit 68842dbea2
1 changed files with 52 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/comment/components/comment-list-with-tabs.tsx
+52 -62
View File
@@ -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}