fix(comments): nitpicks

sanity-io · Mar 11, 2024 · 398a1bf · 398a1bf
1 parent 55f85b4
commit 398a1bf
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/packages/sanity/src/structure/comments/src/components/list/CommentsListItem.tsx b/packages/sanity/src/structure/comments/src/components/list/CommentsListItem.tsx
@@ -28,6 +28,13 @@ const EMPTY_ARRAY: [] = []
 
 const MAX_COLLAPSED_REPLIES = 5
 
+const DEFAULT_AVATAR_CONFIG: CommentsListItemProps['avatarConfig'] = {
+  avatarSize: 1,
+  parentCommentAvatar: true,
+  replyAvatar: true,
+  threadCommentsAvatar: true,
+}
+
 // data-active = when the comment is selected
 // data-hovered = when the mouse is over the comment
 const StyledThreadCard = styled(ThreadCard)(() => {
@@ -75,6 +82,12 @@ const GhostButton = styled.button`
 `
 
 interface CommentsListItemProps {
+  avatarConfig?: {
+    avatarSize: AvatarSize
+    parentCommentAvatar: boolean
+    replyAvatar: boolean
+    threadCommentsAvatar: boolean
+  }
   canReply?: boolean
   currentUser: CurrentUser
   hasReferencedValue?: boolean
@@ -93,20 +106,8 @@ interface CommentsListItemProps {
   parentComment: CommentDocument
   readOnly?: boolean
   replies: CommentDocument[] | undefined
-  avatarConfig?: {
-    parentCommentAvatar: boolean
-    threadCommentsAvatar: boolean
-    replyAvatar: boolean
-    avatarSize: AvatarSize
-  }
 }
 
-const DEFAULT_AVATAR_CONFIG: CommentsListItemProps['avatarConfig'] = {
-  parentCommentAvatar: true,
-  threadCommentsAvatar: true,
-  replyAvatar: true,
-  avatarSize: 1,
-}
 export const CommentsListItem = React.memo(function CommentsListItem(props: CommentsListItemProps) {
   const {
     canReply,
@@ -255,14 +256,14 @@ export const CommentsListItem = React.memo(function CommentsListItem(props: Comm
       splicedReplies.map((reply) => (
         <Stack as="li" key={reply._id} {...applyCommentIdAttr(reply._id)}>
           <CommentsListItemLayout
-            withAvatar={avatarConfig.threadCommentsAvatar}
             avatarSize={avatarConfig.avatarSize}
             canDelete={reply.authorId === currentUser.id}
             canEdit={reply.authorId === currentUser.id}
             comment={reply}
             currentUser={currentUser}
             hasError={reply._state?.type === 'createError'}
             isRetrying={reply._state?.type === 'createRetrying'}
+            intent={commentIntentIfDiffers(parentComment, reply)}
             mentionOptions={mentionOptions}
             mode={mode}
             onCopyLink={onCopyLink}
@@ -272,7 +273,7 @@ export const CommentsListItem = React.memo(function CommentsListItem(props: Comm
             onInputKeyDown={handleInputKeyDown}
             onReactionSelect={onReactionSelect}
             readOnly={readOnly}
-            intent={commentIntentIfDiffers(parentComment, reply)}
+            withAvatar={avatarConfig.threadCommentsAvatar}
           />
         </Stack>
       )),
@@ -358,7 +359,6 @@ export const CommentsListItem = React.memo(function CommentsListItem(props: Comm
 
         {canReply && (
           <CommentInput
-            withAvatar={avatarConfig.replyAvatar}
             avatarSize={avatarConfig.avatarSize}
             currentUser={currentUser}
             expandOnFocus
@@ -376,6 +376,7 @@ export const CommentsListItem = React.memo(function CommentsListItem(props: Comm
             readOnly={readOnly || mode === 'upsell'}
             ref={replyInputRef}
             value={value}
+            withAvatar={avatarConfig.replyAvatar}
           />
         )}
       </Stack>

diff --git a/packages/sanity/src/structure/comments/src/components/list/CommentsListItemLayout.tsx b/packages/sanity/src/structure/comments/src/components/list/CommentsListItemLayout.tsx
@@ -137,6 +137,7 @@ const RootStack = styled(Stack)(({theme}) => {
 })
 
 interface CommentsListItemLayoutProps {
+  avatarSize?: AvatarSize
   canDelete?: boolean
   canEdit?: boolean
   comment: CommentDocument
@@ -157,13 +158,13 @@ interface CommentsListItemLayoutProps {
   onStatusChange?: (id: string, status: CommentStatus) => void
   readOnly?: boolean
   withAvatar?: boolean
-  avatarSize?: AvatarSize
 }
 
 const RELATIVE_TIME_OPTIONS: RelativeTimeOptions = {useTemporalPhrase: true}
 
 export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
   const {
+    avatarSize = 1,
     canDelete,
     canEdit,
     comment,
@@ -184,7 +185,6 @@ export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
     onStatusChange,
     readOnly,
     withAvatar = true,
-    avatarSize = 1,
   } = props
   const {_createdAt, authorId, message, _id, lastEditedAt} = comment
   const [user] = useUser(authorId)