[🐴] Report message dialog (#3941)

* message report dialog

* report chat prompt

* typo

* 100% height sheet on android

* messages-specific report options

* restore unwanted sexual content

* chat -> conversation

src/components/ReportDialog/SelectReportOptionView.tsx

@@ -25,9 +25,12 @@ import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from
 import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'
 
+type ParamsWithMessages = ReportDialogProps['params'] | {type: 'message'}
+
 export function SelectReportOptionView({
   ...props
-}: ReportDialogProps & {
+}: {
+  params: ParamsWithMessages
   labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
   onSelectReportOption: (reportOption: ReportOption) => void
   goBack: () => void
@@ -54,6 +57,9 @@ export function SelectReportOptionView({
     } else if (props.params.type === 'feedgen') {
       title = _(msg`Report this feed`)
       description = _(msg`Why should this feed be reviewed?`)
+    } else if (props.params.type === 'message') {
+      title = _(msg`Report this message`)
+      description = _(msg`Why should this message be reviewed?`)
     }
 
     return {

src/components/dms/ConvoMenu.tsx

@@ -50,6 +50,7 @@ let ConvoMenu = ({
   const {_} = useLingui()
   const t = useTheme()
   const leaveConvoControl = Prompt.usePromptControl()
+  const reportControl = Prompt.usePromptControl()
   const {mutate: markAsRead} = useMarkAsReadMutation()
 
   const {data: convo} = useConvoQuery(initialConvo)
@@ -147,7 +148,7 @@ let ConvoMenu = ({
             </Menu.Item>
           </Menu.Group>
           <Menu.Divider />
-          {/* TODO(samuel): implement these */}
+          {/* TODO(samuel): implement this */}
           <Menu.Group>
             <Menu.Item
               label={_(msg`Block account`)}
@@ -161,11 +162,10 @@ let ConvoMenu = ({
               />
             </Menu.Item>
             <Menu.Item
-              label={_(msg`Report account`)}
-              onPress={() => {}}
-              disabled>
+              label={_(msg`Report conversation`)}
+              onPress={reportControl.open}>
               <Menu.ItemText>
-                <Trans>Report account</Trans>
+                <Trans>Report conversation</Trans>
               </Menu.ItemText>
               <Menu.ItemIcon icon={Flag} />
             </Menu.Item>
@@ -194,9 +194,21 @@ let ConvoMenu = ({
         confirmButtonColor="negative"
         onConfirm={() => leaveConvo()}
       />
+
+      <Prompt.Basic
+        control={reportControl}
+        title={_(msg`Report conversation`)}
+        description={_(
+          msg`To report a conversation, please report one of its messages via the conversation screen. This lets our moderators understand the context of your issue.`,
+        )}
+        confirmButtonCta={_(msg`I understand`)}
+        onConfirm={noop}
+      />
     </>
   )
 }
 ConvoMenu = React.memo(ConvoMenu)
 
 export {ConvoMenu}
+
+function noop() {}

src/components/dms/MessageItem.tsx

@@ -193,6 +193,7 @@ let MessageItemMetadata = ({
 }
 
 MessageItemMetadata = React.memo(MessageItemMetadata)
+export {MessageItemMetadata}
 
 function localDateString(date: Date) {
   // can't use toISOString because it should be in local time

src/components/dms/MessageMenu.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import {LayoutAnimation, Pressable, View} from 'react-native'
 import * as Clipboard from 'expo-clipboard'
+import {RichText} from '@atproto/api'
 import {ChatBskyConvoDefs} from '@atproto-labs/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {isWeb} from 'platform/detection'
 import {useConvo} from 'state/messages/convo'
 import {ConvoStatus} from 'state/messages/convo/types'
@@ -18,6 +20,7 @@ import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'
 import {usePromptControl} from '#/components/Prompt'
 import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '../icons/Clipboard'
+import {MessageReportDialog} from './MessageReportDialog'
 
 export let MessageMenu = ({
   message,
@@ -35,16 +38,22 @@ export let MessageMenu = ({
   const convo = useConvo()
   const deleteControl = usePromptControl()
   const retryDeleteControl = usePromptControl()
+  const reportControl = usePromptControl()
 
   const isFromSelf = message.sender?.did === currentAccount?.did
 
   const onCopyPostText = React.useCallback(() => {
-    // use when we have rich text
-    // const str = richTextToString(richText, true)
+    const str = richTextToString(
+      new RichText({
+        text: message.text,
+        facets: message.facets,
+      }),
+      true,
+    )
 
-    Clipboard.setStringAsync(message.text)
+    Clipboard.setStringAsync(str)
     Toast.show(_(msg`Copied to clipboard`))
-  }, [_, message.text])
+  }, [_, message.text, message.facets])
 
   const onDelete = React.useCallback(() => {
     if (convo.status !== ConvoStatus.Ready) return
@@ -56,10 +65,6 @@ export let MessageMenu = ({
       .catch(() => retryDeleteControl.open())
   }, [_, convo, message.id, retryDeleteControl])
 
-  const onReport = React.useCallback(() => {
-    // TODO report the message
-  }, [])
-
   return (
     <>
       <Menu.Root control={control}>
@@ -104,7 +109,7 @@ export let MessageMenu = ({
               <Menu.Item
                 testID="messageDropdownReportBtn"
                 label={_(msg`Report message`)}
-                onPress={onReport}>
+                onPress={reportControl.open}>
                 <Menu.ItemText>{_(msg`Report`)}</Menu.ItemText>
                 <Menu.ItemIcon icon={Warning} position="right" />
               </Menu.Item>
@@ -113,6 +118,8 @@ export let MessageMenu = ({
         </Menu.Outer>
       </Menu.Root>
 
+      <MessageReportDialog message={message} control={reportControl} />
+
       <Prompt.Basic
         control={deleteControl}
         title={_(msg`Delete message`)}