[C-5025] Add compose ui helper text

packages/common/src/messages/comments.ts

@@ -14,11 +14,13 @@ export const commentsMessages = {
   showMoreReplies: 'Show More Replies',
   reply: 'Reply',
   replies: 'Replies',
+  replyingTo: (handle: string) => `Replying to @${handle}`,
   showReplies: (replyCount: number) =>
     `${formatCount(replyCount)} ${pluralize('Reply', replyCount)}`,
   hideReplies: 'Hide Replies',
   commentsDisabled: 'Comments are disabled for this track',
   edited: 'edited',
+  editing: 'Editing comment',
   commentSettings: 'Comment Settings',
   description: 'Prevent certain users from commenting on your tracks.',
   unmute: 'Unmute',

packages/mobile/src/components/comments/CommentDrawer.tsx

@@ -124,6 +124,7 @@ export const CommentDrawer = () => {
   const renderFooterComponent = useCallback(
     (props: BottomSheetFooterProps) => (
       <BottomSheetFooter {...props} bottomInset={insets.bottom}>
+        <Divider orientation='horizontal' />
         <CommentSectionProvider
           entityId={entityId}
           replyingToComment={replyingToComment}

packages/mobile/src/components/comments/CommentForm.tsx

@@ -1,16 +1,70 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { useGetUserById } from '@audius/common/api'
 import { useCurrentCommentSection } from '@audius/common/context'
 import { commentsMessages as messages } from '@audius/common/messages'
 import type { ID } from '@audius/common/models'
 import type { TextInput as RNTextInput } from 'react-native'
 
-import { Box, Flex } from '@audius/harmony-native'
+import {
+  Box,
+  Flex,
+  IconButton,
+  IconClose,
+  spacing,
+  Text,
+  useTheme
+} from '@audius/harmony-native'
 
 import { ComposerInput } from '../composer-input'
 import { ProfilePicture } from '../core'
 
+type CommentFormHelperTextProps = {
+  replyingToUserHandle?: string
+}
+
+const CommentFormHelperText = (props: CommentFormHelperTextProps) => {
+  const { replyingToUserHandle } = props
+  const { replyingToComment, setReplyingToComment, setEditingComment } =
+    useCurrentCommentSection()
+  const { color, spacing } = useTheme()
+
+  const text = replyingToComment
+    ? messages.replyingTo(replyingToUserHandle ?? '')
+    : messages.editing
+
+  const handlePressClear = useCallback(() => {
+    setReplyingToComment?.(undefined)
+    setEditingComment?.(undefined)
+  }, [setEditingComment, setReplyingToComment])
+
+  return (
+    <Flex
+      direction='row'
+      alignItems='center'
+      justifyContent='space-between'
+      style={{
+        borderColor: color.neutral.n150,
+        backgroundColor: color.background.surface1,
+        borderWidth: 1,
+        borderBottomWidth: 0,
+        borderTopLeftRadius: spacing.unit1,
+        borderTopRightRadius: spacing.unit1,
+        padding: spacing.xs,
+        paddingLeft: spacing.m
+      }}
+    >
+      <Text size='s'>{text}</Text>
+      <IconButton
+        size='2xs'
+        icon={IconClose}
+        onPress={handlePressClear}
+        color='default'
+      />
+    </Flex>
+  )
+}
+
 type CommentFormProps = {
   onSubmit: (commentMessage: string, mentions?: ID[]) => void
   initialValue?: string
@@ -68,6 +122,8 @@ export const CommentForm = (props: CommentFormProps) => {
     ? messages.addComment
     : messages.firstComment
 
+  const showHelperText = editingComment || replyingToComment
+
   return (
     <Flex direction='row' gap='m' alignItems='center'>
       {currentUserId ? (
@@ -76,17 +132,30 @@ export const CommentForm = (props: CommentFormProps) => {
           style={{ width: 40, height: 40, flexShrink: 0 }}
         />
       ) : null}
-      <Box flex={1}>
-        <ComposerInput
-          ref={ref}
-          isLoading={isLoading}
-          messageId={messageId}
-          entityId={entityId}
-          presetMessage={initialMessage}
-          placeholder={placeholder}
-          onSubmit={handleSubmit}
-        />
-      </Box>
+      <Flex flex={1}>
+        {showHelperText ? (
+          <CommentFormHelperText
+            replyingToUserHandle={replyingToUser?.handle}
+          />
+        ) : null}
+        <Box flex={1}>
+          <ComposerInput
+            ref={ref}
+            isLoading={isLoading}
+            messageId={messageId}
+            entityId={entityId}
+            presetMessage={initialMessage}
+            placeholder={placeholder}
+            onSubmit={handleSubmit}
+            styles={{
+              container: {
+                borderTopLeftRadius: showHelperText ? 0 : spacing.unit1,
+                borderTopRightRadius: showHelperText ? 0 : spacing.unit1
+              }
+            }}
+          />
+        </Box>
+      </Flex>
     </Flex>
   )
 }

packages/mobile/src/components/composer-input/ComposerInput.tsx

@@ -98,7 +98,8 @@ export const ComposerInput = forwardRef(function ComposerInput(
     messageId,
     placeholder,
     presetMessage,
-    entityId
+    entityId,
+    styles: propStyles
   } = props
   const [value, setValue] = useState(presetMessage ?? '')
   const [selection, setSelection] = useState<{ start: number; end: number }>()
@@ -273,7 +274,7 @@ export const ComposerInput = forwardRef(function ComposerInput(
         placeholder={placeholder ?? messages.sendMessagePlaceholder}
         Icon={renderIcon}
         styles={{
-          root: styles.composeTextContainer,
+          root: [styles.composeTextContainer, propStyles?.container],
           input: [
             styles.composeTextInput,
             Platform.OS === 'ios' ? { paddingBottom: spacing(1.5) } : null

packages/mobile/src/components/composer-input/types.ts

@@ -1,6 +1,9 @@
 import type { LinkEntity } from '@audius/common/hooks'
 import type { ID } from '@audius/common/models'
 import type { EntityType } from '@audius/sdk'
+import type { TextStyle, ViewStyle } from 'react-native'
+
+import type { StylesProp } from 'app/styles'
 
 import type { TextInputProps } from '../core'
 
@@ -12,6 +15,10 @@ export type ComposerInputProps = {
   onSubmit?: (value: string, linkEntities: LinkEntity[]) => void
   presetMessage?: string
   isLoading?: boolean
+  styles?: StylesProp<{
+    container: ViewStyle
+    input: TextStyle
+  }>
 } & Pick<
   TextInputProps,
   'maxLength' | 'placeholder' | 'onPressIn' | 'readOnly' | 'id'