From 614f402fda99b961bc2ea24021bc8a9e46ca5d53 Mon Sep 17 00:00:00 2001
From: Herman Wikner <wiknerherman@gmail.com>
Date: Mon, 25 Sep 2023 15:54:06 +0200
Subject: [PATCH] feat: ui updates

---
 .../components/avatars/CommentsAvatar.tsx     | 41 ++++++++++++
 .../components/avatars/SpacerAvatar.tsx       | 13 ++++
 .../core/comments/components/avatars/index.ts |  2 +
 .../src/core/comments/components/constants.ts |  1 -
 .../components/list/CommentThreadLayout.tsx   |  2 +-
 .../comments/components/list/CommentsList.tsx | 10 +--
 .../components/list/CommentsListItem.tsx      | 18 +++---
 .../list/CommentsListItemLayout.tsx           | 44 ++++++++-----
 .../components/mentions/MentionsMenuItem.tsx  | 10 ++-
 ...lizer.tsx => CommentMessageSerializer.tsx} | 22 +++++--
 .../pte/blocks/MentionInlineBlock.tsx         |  4 +-
 .../pte/comment-input/CommentInputInner.tsx   | 14 ++---
 .../src/core/comments/components/pte/index.ts |  2 +-
 .../comments/hooks/useCommentOperations.ts    |  4 +-
 .../comments/hooks/useFieldCommentsCount.ts   |  8 +--
 .../comments/utils/buildCommentBreadcrumbs.ts |  4 +-
 .../core/components/userAvatar/UserAvatar.tsx |  3 +-
 .../src/desk/comments/field/CommentField.tsx  | 62 ++++++++++++-------
 18 files changed, 172 insertions(+), 92 deletions(-)
 create mode 100644 packages/sanity/src/core/comments/components/avatars/CommentsAvatar.tsx
 create mode 100644 packages/sanity/src/core/comments/components/avatars/SpacerAvatar.tsx
 create mode 100644 packages/sanity/src/core/comments/components/avatars/index.ts
 rename packages/sanity/src/core/comments/components/pte/{Serializer.tsx => CommentMessageSerializer.tsx} (74%)

diff --git a/packages/sanity/src/core/comments/components/avatars/CommentsAvatar.tsx b/packages/sanity/src/core/comments/components/avatars/CommentsAvatar.tsx
new file mode 100644
index 00000000000..9108523a6c1
--- /dev/null
+++ b/packages/sanity/src/core/comments/components/avatars/CommentsAvatar.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import styled from 'styled-components'
+import {Avatar, AvatarProps} from '@sanity/ui'
+import {User} from '@sanity/types'
+
+const StyledAvatar = styled(Avatar)`
+  svg > ellipse {
+    stroke: transparent;
+  }
+`
+
+const SYMBOLS = /[^\p{Alpha}\p{White_Space}]/gu
+const WHITESPACE = /\p{White_Space}+/u
+
+function nameToInitials(fullName: string) {
+  const namesArray = fullName.replace(SYMBOLS, '').split(WHITESPACE)
+
+  if (namesArray.length === 1) {
+    return `${namesArray[0].charAt(0)}`.toUpperCase()
+  }
+
+  return `${namesArray[0].charAt(0)}${namesArray[namesArray.length - 1].charAt(0)}`
+}
+
+interface CommentsAvatarProps extends AvatarProps {
+  user: User | undefined | null
+}
+
+export function CommentsAvatar(props: CommentsAvatarProps) {
+  const {user: userProp, ...restProps} = props
+  const user = userProp as User
+  const initials = nameToInitials(user?.displayName || '')
+
+  const avatar = user ? (
+    <StyledAvatar src={user?.imageUrl} initials={initials} {...restProps} />
+  ) : (
+    <StyledAvatar {...restProps} />
+  )
+
+  return avatar
+}
diff --git a/packages/sanity/src/core/comments/components/avatars/SpacerAvatar.tsx b/packages/sanity/src/core/comments/components/avatars/SpacerAvatar.tsx
new file mode 100644
index 00000000000..fed96082ac4
--- /dev/null
+++ b/packages/sanity/src/core/comments/components/avatars/SpacerAvatar.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const INLINE_STYLE: React.CSSProperties = {
+  minWidth: 25,
+}
+
+/**
+ * This component is used to as a spacer in situations where we want to align
+ * components without avatars with components that have avatars.
+ */
+export function SpacerAvatar() {
+  return <div style={INLINE_STYLE} />
+}
diff --git a/packages/sanity/src/core/comments/components/avatars/index.ts b/packages/sanity/src/core/comments/components/avatars/index.ts
new file mode 100644
index 00000000000..90ba25005e0
--- /dev/null
+++ b/packages/sanity/src/core/comments/components/avatars/index.ts
@@ -0,0 +1,2 @@
+export * from './CommentsAvatar'
+export * from './SpacerAvatar'
diff --git a/packages/sanity/src/core/comments/components/constants.ts b/packages/sanity/src/core/comments/components/constants.ts
index 2377a8c1d06..50d00d1193b 100644
--- a/packages/sanity/src/core/comments/components/constants.ts
+++ b/packages/sanity/src/core/comments/components/constants.ts
@@ -1,4 +1,3 @@
 import {FlexProps} from '@sanity/ui'
 
 export const FLEX_GAP: FlexProps['gap'] = 3
-export const AVATAR_SIZE = 25
diff --git a/packages/sanity/src/core/comments/components/list/CommentThreadLayout.tsx b/packages/sanity/src/core/comments/components/list/CommentThreadLayout.tsx
index 2ffea4e85e2..8ca9ed452c9 100644
--- a/packages/sanity/src/core/comments/components/list/CommentThreadLayout.tsx
+++ b/packages/sanity/src/core/comments/components/list/CommentThreadLayout.tsx
@@ -145,7 +145,7 @@ export function CommentThreadLayout(props: CommentThreadLayoutProps) {
         </ThreadCard>
       )}
 
-      {children}
+      <Stack space={2}>{children}</Stack>
     </Stack>
   )
 }
diff --git a/packages/sanity/src/core/comments/components/list/CommentsList.tsx b/packages/sanity/src/core/comments/components/list/CommentsList.tsx
index 813cf6aa9ab..4771e5c1d4b 100644
--- a/packages/sanity/src/core/comments/components/list/CommentsList.tsx
+++ b/packages/sanity/src/core/comments/components/list/CommentsList.tsx
@@ -183,15 +183,7 @@ export const CommentsList = forwardRef<CommentsListHandle, CommentsListProps>(fu
       )}
 
       {showComments && (
-        <Stack
-          flex={1}
-          overflow="auto"
-          paddingBottom={6}
-          paddingX={3}
-          paddingY={4}
-          sizing="border"
-          space={4}
-        >
+        <Stack flex={1} overflow="auto" padding={3} paddingBottom={6} sizing="border" space={4}>
           <BoundaryElementProvider element={boundaryElement}>
             {groupedComments.map(([fieldPath, group]) => {
               const parentComments = group.filter((c) => !c.parentCommentId)
diff --git a/packages/sanity/src/core/comments/components/list/CommentsListItem.tsx b/packages/sanity/src/core/comments/components/list/CommentsListItem.tsx
index 828b4c28eca..ebf4d8d447e 100644
--- a/packages/sanity/src/core/comments/components/list/CommentsListItem.tsx
+++ b/packages/sanity/src/core/comments/components/list/CommentsListItem.tsx
@@ -12,7 +12,7 @@ import {
   CommentStatus,
 } from '../../types'
 import {MentionOptionsHookValue} from '../../hooks'
-import {AVATAR_SIZE} from '../constants'
+import {SpacerAvatar} from '../avatars'
 import {CommentsListItemLayout} from './CommentsListItemLayout'
 
 const EMPTY_ARRAY: [] = []
@@ -123,6 +123,12 @@ export function CommentsListItem(props: CommentsListItemProps) {
     return replies.length > MAX_COLLAPSED_REPLIES
   }, [replies])
 
+  const expandButtonText = useMemo(() => {
+    return `${replies?.length - MAX_COLLAPSED_REPLIES} more ${
+      replies?.length - MAX_COLLAPSED_REPLIES === 1 ? 'comment' : 'comments'
+    }`
+  }, [replies?.length])
+
   useEffect(() => {
     if (replies.length > MAX_COLLAPSED_REPLIES && !didExpand.current) {
       setCollapsed(true)
@@ -149,11 +155,7 @@ export function CommentsListItem(props: CommentsListItemProps) {
 
             {showCollapseButton && !didExpand.current && (
               <Flex gap={1} paddingY={1} sizing="border">
-                <div
-                  style={{
-                    width: AVATAR_SIZE,
-                  }}
-                />
+                <SpacerAvatar />
 
                 <ExpandButton
                   fontSize={1}
@@ -162,9 +164,7 @@ export function CommentsListItem(props: CommentsListItemProps) {
                   onClick={handleExpand}
                   padding={2}
                   space={2}
-                  text={`${replies?.length - MAX_COLLAPSED_REPLIES} more ${
-                    replies?.length - MAX_COLLAPSED_REPLIES === 1 ? 'comment' : 'comments'
-                  }`}
+                  text={expandButtonText}
                 />
               </Flex>
             )}
diff --git a/packages/sanity/src/core/comments/components/list/CommentsListItemLayout.tsx b/packages/sanity/src/core/comments/components/list/CommentsListItemLayout.tsx
index 6018f6ec630..55b63ee755e 100644
--- a/packages/sanity/src/core/comments/components/list/CommentsListItemLayout.tsx
+++ b/packages/sanity/src/core/comments/components/list/CommentsListItemLayout.tsx
@@ -7,7 +7,6 @@ import {
   EyeOpenIcon,
 } from '@sanity/icons'
 import {
-  Avatar,
   TextSkeleton,
   Flex,
   Button,
@@ -28,17 +27,17 @@ import {CurrentUser, Path} from '@sanity/types'
 import styled, {css} from 'styled-components'
 import {format} from 'date-fns'
 import * as PathUtils from '@sanity/util/paths'
-import {UserAvatar} from '../../../components'
 import {TimeAgoOpts, useTimeAgo} from '../../../hooks'
 import {useUser} from '../../../store'
 import {CommentMessageSerializer} from '../pte'
 import {CommentInput} from '../pte/comment-input'
 import {CommentDocument, CommentEditPayload, CommentMessage, CommentStatus} from '../../types'
-import {AVATAR_SIZE, FLEX_GAP} from '../constants'
+import {FLEX_GAP} from '../constants'
 import {useDidUpdate} from '../../../form'
 import {useCommentHasChanged} from '../../helpers'
 import {MentionOptionsHookValue} from '../../hooks'
 import {TextTooltip} from '../TextTooltip'
+import {CommentsAvatar, SpacerAvatar} from '../avatars'
 
 const FloatingLayer = styled(Layer)(({theme}) => {
   const {space} = theme.sanity
@@ -126,9 +125,8 @@ export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
 
   const hasChanges = useCommentHasChanged(value)
 
-  const _date = lastEditedAt || _createdAt
-  const date = _date ? new Date(_date) : new Date()
-  const timeAgo = useTimeAgo(date, TIME_AGO_OPTS)
+  const createdDate = _createdAt ? new Date(_createdAt) : new Date()
+  const createdTimeAgo = useTimeAgo(createdDate, TIME_AGO_OPTS)
 
   const handleMenuOpen = useCallback(() => setMenuOpen(true), [])
   const handleMenuClose = useCallback(() => setMenuOpen(false), [])
@@ -181,7 +179,7 @@ export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
     }
   }, [rootElement])
 
-  const avatar = user ? <UserAvatar user={user} /> : <Avatar />
+  const avatar = <CommentsAvatar user={user} />
 
   const name = user?.displayName ? (
     <Text size={1} weight="semibold" textOverflow="ellipsis" title={user.displayName}>
@@ -207,20 +205,34 @@ export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
           <Flex align="flex-end" gap={2} flex={1}>
             <Box flex={1}>{name}</Box>
 
-            <Text size={0} muted title={format(date, 'PPPPp')} style={{minWidth: 'max-content'}}>
-              {timeAgo} {lastEditedAt && <>(edited)</>}
-            </Text>
+            <Flex align="center" gap={1}>
+              <Text
+                size={0}
+                muted
+                title={format(createdDate, 'PPPPp')}
+                style={{minWidth: 'max-content'}}
+              >
+                {createdTimeAgo}
+              </Text>
+
+              {lastEditedAt && (
+                <Text
+                  size={0}
+                  muted
+                  title={format(new Date(lastEditedAt), 'PPPPp')}
+                  style={{minWidth: 'max-content'}}
+                >
+                  (edited)
+                </Text>
+              )}
+            </Flex>
           </Flex>
         </Flex>
       </Flex>
 
       {isEditing && (
         <Flex align="flex-start" gap={2} ref={setRootElement}>
-          <div
-            style={{
-              minWidth: AVATAR_SIZE,
-            }}
-          />
+          <SpacerAvatar />
 
           <Stack flex={1}>
             <CommentInput
@@ -319,7 +331,7 @@ export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
           </TooltipDelayGroupProvider>
 
           <Flex gap={FLEX_GAP}>
-            <div style={{minWidth: AVATAR_SIZE}} aria-hidden="true" />
+            <SpacerAvatar />
 
             <CommentMessageSerializer blocks={message} />
           </Flex>
diff --git a/packages/sanity/src/core/comments/components/mentions/MentionsMenuItem.tsx b/packages/sanity/src/core/comments/components/mentions/MentionsMenuItem.tsx
index 74ed8b32733..b91d4871e6d 100644
--- a/packages/sanity/src/core/comments/components/mentions/MentionsMenuItem.tsx
+++ b/packages/sanity/src/core/comments/components/mentions/MentionsMenuItem.tsx
@@ -1,9 +1,9 @@
-import {Avatar, TextSkeleton, Flex, Text, Card, Box, Badge} from '@sanity/ui'
+import {TextSkeleton, Flex, Text, Card, Box, Badge} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import styled from 'styled-components'
 import {MentionOptionUser} from '../../types'
-import {UserAvatar} from '../../../components'
 import {useUser} from '../../../store'
+import {CommentsAvatar} from '../avatars/CommentsAvatar'
 
 const InnerFlex = styled(Flex)``
 
@@ -16,10 +16,8 @@ export function MentionsMenuItem(props: MentionsItemProps) {
   const {user, onSelect} = props
   const [loadedUser] = useUser(user.id)
 
-  const avatar = loadedUser ? (
-    <UserAvatar user={loadedUser} status={user.canBeMentioned ? undefined : 'inactive'} />
-  ) : (
-    <Avatar />
+  const avatar = (
+    <CommentsAvatar user={loadedUser} status={user.canBeMentioned ? undefined : 'inactive'} />
   )
 
   const text = loadedUser ? (
diff --git a/packages/sanity/src/core/comments/components/pte/Serializer.tsx b/packages/sanity/src/core/comments/components/pte/CommentMessageSerializer.tsx
similarity index 74%
rename from packages/sanity/src/core/comments/components/pte/Serializer.tsx
rename to packages/sanity/src/core/comments/components/pte/CommentMessageSerializer.tsx
index cabdaba3d62..81e98217577 100644
--- a/packages/sanity/src/core/comments/components/pte/Serializer.tsx
+++ b/packages/sanity/src/core/comments/components/pte/CommentMessageSerializer.tsx
@@ -17,6 +17,8 @@ const PortableTextWrap = styled(Stack)(() => {
   `
 })
 
+const EMPTY_ARRAY: [] = []
+
 const components: PortableTextComponents = {
   block: {
     normal: ({children}) => <NormalBlock>{children}</NormalBlock>,
@@ -30,9 +32,16 @@ const components: PortableTextComponents = {
     h6: ({children}) => <NormalBlock>{children}</NormalBlock>,
     blockquote: ({children}) => <NormalBlock>{children}</NormalBlock>,
     code: ({children}) => <NormalBlock>{children}</NormalBlock>,
-    ul: ({children}) => <NormalBlock>{children}</NormalBlock>,
-    ol: ({children}) => <NormalBlock>{children}</NormalBlock>,
-    li: ({children}) => <NormalBlock>{children}</NormalBlock>,
+  },
+  list: {
+    bullet: ({children}) => <>{children}</>,
+    number: ({children}) => <>{children}</>,
+    checkmarks: ({children}) => <>{children}</>,
+  },
+  listItem: {
+    bullet: ({children}) => <NormalBlock>{children}</NormalBlock>,
+    number: ({children}) => <NormalBlock>{children}</NormalBlock>,
+    checkmarks: ({children}) => <NormalBlock>{children}</NormalBlock>,
   },
   marks: {
     // Since we do not offer any formatting options, we can just use the normal block for all of these.
@@ -41,6 +50,7 @@ const components: PortableTextComponents = {
     code: ({children}) => <>{children}</>,
     underline: ({children}) => <>{children}</>,
     strikeThrough: ({children}) => <>{children}</>,
+    link: ({children}) => <>{children}</>,
   },
   types: {
     mention: (props) => {
@@ -49,7 +59,7 @@ const components: PortableTextComponents = {
   },
 }
 
-interface PortableTextSerializerProps {
+interface CommentMessageSerializerProps {
   blocks: CommentMessage
 }
 
@@ -57,12 +67,12 @@ interface PortableTextSerializerProps {
  * @beta
  * @hidden
  */
-export function CommentMessageSerializer(props: PortableTextSerializerProps) {
+export function CommentMessageSerializer(props: CommentMessageSerializerProps) {
   const {blocks} = props
 
   return (
     <PortableTextWrap>
-      <PortableText value={blocks || []} components={components} />
+      <PortableText value={blocks || EMPTY_ARRAY} components={components} />
     </PortableTextWrap>
   )
 }
diff --git a/packages/sanity/src/core/comments/components/pte/blocks/MentionInlineBlock.tsx b/packages/sanity/src/core/comments/components/pte/blocks/MentionInlineBlock.tsx
index ff2f4aec0f0..922ff3e8bd7 100644
--- a/packages/sanity/src/core/comments/components/pte/blocks/MentionInlineBlock.tsx
+++ b/packages/sanity/src/core/comments/components/pte/blocks/MentionInlineBlock.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import {Tooltip, Flex, Text} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {UserAvatar} from '../../../../components'
 import {useCurrentUser, useUser} from '../../../../store'
+import {CommentsAvatar} from '../../avatars/CommentsAvatar'
 
 const Span = styled.span(({theme}) => {
   const {regular} = theme.sanity.fonts?.text.weights
@@ -42,7 +42,7 @@ export function MentionInlineBlock(props: MentionInlineBlockProps) {
       content={
         <Flex align="center" padding={2} gap={1}>
           <Flex>
-            <UserAvatar user={user} />
+            <CommentsAvatar user={user} />
           </Flex>
 
           <Text size={1}>{user.displayName}</Text>
diff --git a/packages/sanity/src/core/comments/components/pte/comment-input/CommentInputInner.tsx b/packages/sanity/src/core/comments/components/pte/comment-input/CommentInputInner.tsx
index b82a3e98186..fe46561942f 100644
--- a/packages/sanity/src/core/comments/components/pte/comment-input/CommentInputInner.tsx
+++ b/packages/sanity/src/core/comments/components/pte/comment-input/CommentInputInner.tsx
@@ -1,11 +1,11 @@
-import React, {useCallback, useRef, useState} from 'react'
-import {Avatar, Flex, Button, MenuDivider, Box, Card, Stack} from '@sanity/ui'
+import React, {useCallback, useState} from 'react'
+import {Flex, Button, MenuDivider, Box, Card, Stack} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 import {CurrentUser} from '@sanity/types'
-import {ArrowUpIcon, CloseIcon} from '@sanity/icons'
+import {CloseIcon} from '@sanity/icons'
 import {useUser} from '../../../../store'
-import {UserAvatar} from '../../../../components'
-import {MentionIcon} from '../../icons'
+import {MentionIcon, SendIcon} from '../../icons'
+import {CommentsAvatar} from '../../avatars/CommentsAvatar'
 import {useCommentInput} from './useCommentInput'
 import {Editable} from './Editable'
 
@@ -82,7 +82,7 @@ export function CommentInputInner(props: CommentInputInnerProps) {
   const [user] = useUser(currentUser.id)
   const {openMentions, focused, expandOnFocus, canSubmit, hasChanges} = useCommentInput()
 
-  const avatar = user ? <UserAvatar size={0} user={user} /> : <Avatar size={0} />
+  const avatar = <CommentsAvatar user={user} />
 
   const handleDiscardEdit = useCallback(() => {
     onEditDiscard()
@@ -134,7 +134,7 @@ export function CommentInputInner(props: CommentInputInnerProps) {
               aria-label="Send comment"
               disabled={!canSubmit || !hasChanges}
               fontSize={1}
-              icon={ArrowUpIcon}
+              icon={SendIcon}
               mode={hasChanges && canSubmit ? 'default' : 'bleed'}
               onClick={onSubmit}
               padding={2}
diff --git a/packages/sanity/src/core/comments/components/pte/index.ts b/packages/sanity/src/core/comments/components/pte/index.ts
index a173b2c7a0b..73baef26055 100644
--- a/packages/sanity/src/core/comments/components/pte/index.ts
+++ b/packages/sanity/src/core/comments/components/pte/index.ts
@@ -1,2 +1,2 @@
-export * from './Serializer'
+export * from './CommentMessageSerializer'
 export * from './comment-input'
diff --git a/packages/sanity/src/core/comments/hooks/useCommentOperations.ts b/packages/sanity/src/core/comments/hooks/useCommentOperations.ts
index e78818771e3..77768833f65 100644
--- a/packages/sanity/src/core/comments/hooks/useCommentOperations.ts
+++ b/packages/sanity/src/core/comments/hooks/useCommentOperations.ts
@@ -58,13 +58,13 @@ export function useCommentOperations(
   const handleCreate = useCallback(
     async (comment: CommentCreatePayload) => {
       const nextComment = {
-        _type: 'comment',
         _id: uuid(),
+        _type: 'comment',
         authorId: authorId || '', // improve
         lastEditedAt: undefined,
         message: comment.message,
-        status: comment.status,
         parentCommentId: comment.parentCommentId,
+        status: comment.status,
         threadId: comment.threadId,
         context: {
           payload: {
diff --git a/packages/sanity/src/core/comments/hooks/useFieldCommentsCount.ts b/packages/sanity/src/core/comments/hooks/useFieldCommentsCount.ts
index 07f7cd3f6b1..e66fcfb1e08 100644
--- a/packages/sanity/src/core/comments/hooks/useFieldCommentsCount.ts
+++ b/packages/sanity/src/core/comments/hooks/useFieldCommentsCount.ts
@@ -2,19 +2,15 @@ import {Path} from '@sanity/types'
 import * as PathUtils from '@sanity/util/paths'
 import {useComments} from './useComments'
 
-interface FieldCommentsCountHook {
-  path: Path
-}
-
 /**
  * Get the total number of open comments associated with a field path.
  *
  * @beta
  * @hidden
  */
-export function useFieldCommentsCount(opts: FieldCommentsCountHook): number {
+export function useFieldCommentsCount(path: Path): number {
   const {comments} = useComments()
-  const stringPath = PathUtils.toString(opts.path)
+  const stringPath = PathUtils.toString(path)
 
   return comments.data.open.filter((comment) => comment.target.path?.field === stringPath).length
 }
diff --git a/packages/sanity/src/core/comments/utils/buildCommentBreadcrumbs.ts b/packages/sanity/src/core/comments/utils/buildCommentBreadcrumbs.ts
index 40c89274fdc..e5193d61ed7 100644
--- a/packages/sanity/src/core/comments/utils/buildCommentBreadcrumbs.ts
+++ b/packages/sanity/src/core/comments/utils/buildCommentBreadcrumbs.ts
@@ -83,8 +83,8 @@ export function buildCommentBreadcrumbs(props: BuildCommentBreadcrumbsProps): Co
       return
     }
 
-    // This is usually the schema definition of an array item (ie inside of: []).
-    // todo: fix so that we get the defined titled instead of the field name.
+    // This is usually the schema definition of an array item (ie inside `of: []`).
+    // todo: fix so that we get the defined title (if any) instead of the field name.
     // We need to add support for it in `getSchemaField`.
     if (!isArraySegment) {
       fieldPaths.push({
diff --git a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
index ce22b510931..1ed0aefd150 100644
--- a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
+++ b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
@@ -80,7 +80,7 @@ const StaticUserAvatar = forwardRef(function StaticUserAvatar(
   props: Omit<UserAvatarProps, 'user'> & {user: User},
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {user, animateArrowFrom, position, size, status, tone} = props
+  const {user, animateArrowFrom, position, size, status, tone, ...restProps} = props
   const [imageLoadError, setImageLoadError] = useState<null | Error>(null)
   const userColor = useUserColor(user.id)
   const imageUrl = imageLoadError ? undefined : user?.imageUrl
@@ -98,6 +98,7 @@ const StaticUserAvatar = forwardRef(function StaticUserAvatar(
       size={typeof size === 'string' ? LEGACY_TO_UI_AVATAR_SIZES[size] : size}
       status={status}
       title={user?.displayName}
+      {...restProps}
     />
   )
 })
diff --git a/packages/sanity/src/desk/comments/field/CommentField.tsx b/packages/sanity/src/desk/comments/field/CommentField.tsx
index 77ed1565ceb..8d39fe204e7 100644
--- a/packages/sanity/src/desk/comments/field/CommentField.tsx
+++ b/packages/sanity/src/desk/comments/field/CommentField.tsx
@@ -14,8 +14,6 @@ import {
   useFieldCommentsCount,
 } from 'sanity'
 
-const SCROLL_INTO_VIEW_OPTIONS: ScrollIntoViewOptions = {behavior: 'smooth', block: 'start'}
-
 export function CommentField(props: FieldProps) {
   const {documentId, documentType} = useDocumentPane()
 
@@ -38,7 +36,7 @@ function CommentFieldInner(props: FieldProps) {
   const currentUser = useCurrentUser()
   const {create, status, setStatus, comments} = useComments()
 
-  const count = useFieldCommentsCount({path: props.path})
+  const count = useFieldCommentsCount(props.path)
   const hasComments = Boolean(count > 0)
 
   const [shouldScrollToThread, setShouldScrollToThread] = useState<boolean>(false)
@@ -51,43 +49,61 @@ function CommentFieldInner(props: FieldProps) {
     setShouldScrollToThread(true)
   }, [hasComments, setStatus, status])
 
-  useEffect(() => {
-    if (status === 'open' && inspector?.name === COMMENTS_INSPECTOR_NAME && shouldScrollToThread) {
-      const threadId = comments.data.open.find(
-        (comment) => comment.target?.path?.field === props.path.toString(),
-      )?.threadId
-
-      // Find the node in the DOM
-      const node = document.querySelector(`[data-thread-id="${threadId}"]`)
-
-      // Scroll to the node
-      if (node) {
-        requestAnimationFrame(() => {
-          node.scrollIntoView(SCROLL_INTO_VIEW_OPTIONS)
-        })
+  const handleScrollToThread = useCallback(
+    (threadId: string) => {
+      if (
+        status === 'open' &&
+        inspector?.name === COMMENTS_INSPECTOR_NAME &&
+        shouldScrollToThread &&
+        threadId
+      ) {
+        // Find the node in the DOM
+        const node = document.querySelector(`[data-thread-id="${threadId}"]`)
+
+        // // Scroll to node with 8px offset top
+        if (node) {
+          requestAnimationFrame(() => {
+            node.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'})
+          })
+        }
+
+        // Reset shouldScrollToThread to false after performing the scroll action
+        setShouldScrollToThread(false)
       }
+    },
+    [inspector?.name, shouldScrollToThread, status],
+  )
 
-      // Reset shouldScrollToThread to false after performing the scroll action
-      setShouldScrollToThread(false)
+  useEffect(() => {
+    const threadId = comments.data.open.find(
+      (comment) => comment.target?.path?.field === props.path.toString(),
+    )?.threadId
+
+    if (threadId) {
+      handleScrollToThread(threadId)
     }
-  }, [status, inspector?.name, props.path, shouldScrollToThread, comments.data.open])
+  }, [comments.data.open, handleScrollToThread, props.path])
 
   const handleCommentAdd = useCallback(() => {
     if (value) {
+      // Since this is a new comment, we generate a new thread ID
+      const threadId = uuid()
+
       const nextComment = {
         fieldPath: pathToString(props.path),
         message: value,
         parentCommentId: undefined,
         status: 'open',
-        // Since this is a new comment, we generate a new thread ID
-        threadId: uuid(),
+        threadId,
       } satisfies CommentCreatePayload
 
       create.execute(nextComment)
 
+      openInspector(COMMENTS_INSPECTOR_NAME)
+
       setValue(null)
     }
-  }, [create, props.path, value])
+  }, [create, openInspector, props.path, value])
 
   const handleDiscard = useCallback(() => {
     setValue(null)