diff --git a/app/scenes/Document/components/CommentThread.tsx b/app/scenes/Document/components/CommentThread.tsx index 21d7253715..4967a5dfe8 100644 --- a/app/scenes/Document/components/CommentThread.tsx +++ b/app/scenes/Document/components/CommentThread.tsx @@ -16,6 +16,7 @@ import Typing from "~/components/Typing"; import { WebsocketContext } from "~/components/WebsocketProvider"; import useCurrentUser from "~/hooks/useCurrentUser"; import useOnClickOutside from "~/hooks/useOnClickOutside"; +import usePolicy from "~/hooks/usePolicy"; import useStores from "~/hooks/useStores"; import { sidebarAppearDuration } from "~/styles/animations"; import CommentForm from "./CommentForm"; @@ -68,6 +69,7 @@ function CommentThread({ document, comment: thread, }); + const can = usePolicy(document.id); const commentsInThread = comments .inThread(thread.id) @@ -155,7 +157,8 @@ function CommentThread({ comment={comment} key={comment.id} firstOfThread={index === 0} - lastOfThread={index === commentsInThread.length - 1 && !focused} + lastOfThread={index === commentsInThread.length - 1} + canReply={focused && can.comment} firstOfAuthor={firstOfAuthor} lastOfAuthor={lastOfAuthor} previousCommentCreatedAt={commentsInThread[index - 1]?.createdAt} @@ -174,7 +177,7 @@ function CommentThread({ ))} - {(focused || commentsInThread.length === 0) && ( + {(focused || commentsInThread.length === 0) && can.comment && ( )} - {!focused && !recessed && ( + {!focused && !recessed && can.comment && ( setAutoFocus(true)}>{t("Reply")}… )} diff --git a/app/scenes/Document/components/CommentThreadItem.tsx b/app/scenes/Document/components/CommentThreadItem.tsx index e88f788e2c..986a91e5f8 100644 --- a/app/scenes/Document/components/CommentThreadItem.tsx +++ b/app/scenes/Document/components/CommentThreadItem.tsx @@ -68,6 +68,8 @@ type Props = { lastOfAuthor?: boolean; /** The date of the previous comment in the thread */ previousCommentCreatedAt?: string; + /** Whether the user can reply in the thread */ + canReply: boolean; }; function CommentThreadItem({ @@ -77,6 +79,7 @@ function CommentThreadItem({ lastOfThread, dir, previousCommentCreatedAt, + canReply, }: Props) { const { editor } = useDocumentContext(); const { showToast } = useToasts(); @@ -139,6 +142,7 @@ function CommentThreadItem({ $firstOfAuthor={firstOfAuthor} $lastOfThread={lastOfThread} $dir={dir} + $canReply={canReply} column > {(showAuthor || showTime) && ( @@ -247,6 +251,7 @@ export const Bubble = styled(Flex)<{ $firstOfThread?: boolean; $firstOfAuthor?: boolean; $lastOfThread?: boolean; + $canReply?: boolean; $focused?: boolean; $dir?: "rtl" | "ltr"; }>` @@ -260,8 +265,9 @@ export const Bubble = styled(Flex)<{ padding: 8px 12px; transition: color 100ms ease-out, ${s("backgroundTransition")}; - ${({ $lastOfThread }) => + ${({ $lastOfThread, $canReply }) => $lastOfThread && + !$canReply && "border-bottom-left-radius: 8px; border-bottom-right-radius: 8px"}; ${({ $firstOfThread }) => diff --git a/app/scenes/Document/components/Comments.tsx b/app/scenes/Document/components/Comments.tsx index 90c93534cb..f4667582f2 100644 --- a/app/scenes/Document/components/Comments.tsx +++ b/app/scenes/Document/components/Comments.tsx @@ -10,6 +10,7 @@ import Scrollable from "~/components/Scrollable"; import useCurrentUser from "~/hooks/useCurrentUser"; import useFocusedComment from "~/hooks/useFocusedComment"; import useKeyDown from "~/hooks/useKeyDown"; +import usePolicy from "~/hooks/usePolicy"; import useStores from "~/hooks/useStores"; import CommentForm from "./CommentForm"; import CommentThread from "./CommentThread"; @@ -22,6 +23,7 @@ function Comments() { const match = useRouteMatch<{ documentSlug: string }>(); const document = documents.getByUrl(match.params.documentSlug); const focusedComment = useFocusedComment(); + const can = usePolicy(document?.id); useKeyDown("Escape", () => document && ui.collapseComments(document?.id)); @@ -65,7 +67,7 @@ function Comments() { - {!focusedComment && ( + {!focusedComment && can.comment && ( ) { multiplayer, ...rest } = props; + const can = usePolicy(document.id); const childRef = React.useRef(null); const focusAtStart = React.useCallback(() => { @@ -178,7 +180,7 @@ function DocumentEditor(props: Props, ref: React.RefObject) { focusedCommentId={focusedComment?.id} onClickCommentMark={handleClickComment} onCreateCommentMark={ - team?.getPreference(TeamPreference.Commenting) + team?.getPreference(TeamPreference.Commenting) && can.comment ? handleDraftComment : undefined }