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
}