Merge remote-tracking branch 'origin/main' into dms/deleted-account

* origin/main:
  Update French localization (#4113)
  Update Japanese translations (#3886)
  Update pt-BR localization to latest version (#4009)
  Update zh-CN translations (#3932)
  Update zh-TW translations  (#4025)
  Update Korean localization (#4030)
  Update catalan messages.po (#4079)
  Update Spanish Localization (#4105)
  Allow removal of feeds that fail to load (#4121)
  [🐴] Make message input layout resizing synchronous (#4123)
  [🐴] Adjust content height whenever the emoji picker keyboard is opened or closed (#4120)
  Conditionally set chat declaration (#4122)
  [🐴] Fix load state for disabled chats (#4119)
  Bump api sdk (#4118)
  [🐴] Switch back to encouraging users to report messages (#4117)
  convo button skeleton (#4115)
  [🐴] Screenreader accessibility actions for individual chat items (#4116)
  [🐴] DM button on profile (#4097)
  [🐴] Don't retry sends (#4111)

package.json

@@ -49,7 +49,7 @@
     "open-analyzer": "EXPO_PUBLIC_OPEN_ANALYZER=1 yarn build-web"
   },
   "dependencies": {
-    "@atproto/api": "^0.12.10",
+    "@atproto/api": "^0.12.11",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",

src/components/ReportDialog/SelectReportOptionView.tsx

@@ -58,9 +58,6 @@ export function SelectReportOptionView({
     } else if (props.params.type === 'convoMessage') {
       title = _(msg`Report this message`)
       description = _(msg`Why should this message be reviewed?`)
-    } else if (props.params.type === 'convoAccount') {
-      title = _(msg`Report this account`)
-      description = _(msg`Why should this account be reviewed?`)
     }
 
     return {

src/components/ReportDialog/types.ts

@@ -13,5 +13,4 @@ export type ReportDialogProps = {
         did: string
       }
     | {type: 'convoMessage'}
-    | {type: 'convoAccount'}
 }

src/components/dms/ActionsWrapper.tsx

@@ -9,6 +9,8 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated'
 import {ChatBskyConvoDefs} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10} from 'lib/constants'
 import {useHaptics} from 'lib/haptics'
@@ -25,6 +27,7 @@ export function ActionsWrapper({
   isFromSelf: boolean
   children: React.ReactNode
 }) {
+  const {_} = useLingui()
   const playHaptic = useHaptics()
   const menuControl = useMenuControl()
 
@@ -78,7 +81,12 @@ export function ActionsWrapper({
           },
           isFromSelf ? a.self_end : a.self_start,
           animatedStyle,
-        ]}>
+        ]}
+        accessible={true}
+        accessibilityActions={[
+          {name: 'activate', label: _(msg`Open message options`)},
+        ]}
+        onAccessibilityAction={open}>
         {children}
         <MessageMenu message={message} control={menuControl} />
       </Animated.View>

src/components/dms/ConvoMenu.tsx

@@ -21,7 +21,7 @@ import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
 import {BlockedByListDialog} from '#/components/dms/BlockedByListDialog'
 import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
-import {ReportDialog} from '#/components/dms/ReportDialog'
+import {ReportConversationPrompt} from '#/components/dms/ReportConversationPrompt'
 import {ArrowBoxLeft_Stroke2_Corner0_Rounded as ArrowBoxLeft} from '#/components/icons/ArrowBoxLeft'
 import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontal} from '#/components/icons/DotGrid'
 import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
@@ -222,10 +222,7 @@ let ConvoMenu = ({
         convoId={convo.id}
         currentScreen={currentScreen}
       />
-      <ReportDialog
-        control={reportControl}
-        params={{type: 'convoAccount', did: profile.did, convoId: convo.id}}
-      />
+      <ReportConversationPrompt control={reportControl} />
       <BlockedByListDialog
         control={blockedByListControl}
         listBlocks={listBlocks}

src/components/dms/MessageProfileButton.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import {View} from 'react-native'
+import {AppBskyActorDefs} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useMaybeConvoForUser} from '#/state/queries/messages/get-convo-for-members'
+import {atoms as a, useTheme} from '#/alf'
+import {Message_Stroke2_Corner0_Rounded as Message} from '../icons/Message'
+import {Link} from '../Link'
+import {canBeMessaged} from './util'
+
+export function MessageProfileButton({
+  profile,
+}: {
+  profile: AppBskyActorDefs.ProfileView
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+
+  const {data: convoId, isPending} = useMaybeConvoForUser(profile.did)
+
+  if (isPending) {
+    // show pending state based on declaration
+    if (canBeMessaged(profile)) {
+      return (
+        <View
+          testID="dmBtnLoading"
+          aria-hidden={true}
+          style={[
+            a.justify_center,
+            a.align_center,
+            t.atoms.bg_contrast_25,
+            a.rounded_full,
+            {width: 36, height: 36},
+          ]}>
+          <Message
+            style={[
+              t.atoms.text,
+              {marginLeft: 1, marginBottom: 1, opacity: 0.3},
+            ]}
+            size="md"
+          />
+        </View>
+      )
+    } else {
+      return null
+    }
+  }
+
+  if (convoId) {
+    return (
+      <Link
+        testID="dmBtn"
+        size="small"
+        color="secondary"
+        variant="solid"
+        shape="round"
+        label={_(msg`Message ${profile.handle}`)}
+        to={`/messages/${convoId}`}
+        style={[a.justify_center, {width: 36, height: 36}]}>
+        <Message
+          style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]}
+          size="md"
+        />
+      </Link>
+    )
+  } else {
+    return null
+  }
+}

src/components/dms/MessagesListBlockedFooter.tsx

@@ -12,7 +12,7 @@ import {useDialogControl} from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import {BlockedByListDialog} from '#/components/dms/BlockedByListDialog'
 import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
-import {ReportDialog} from '#/components/dms/ReportDialog'
+import {ReportConversationPrompt} from '#/components/dms/ReportConversationPrompt'
 import {Text} from '#/components/Typography'
 
 export function MessagesListBlockedFooter({
@@ -120,10 +120,7 @@ export function MessagesListBlockedFooter({
         convoId={convoId}
       />
 
-      <ReportDialog
-        control={reportControl}
-        params={{type: 'convoAccount', did: recipient.did, convoId}}
-      />
+      <ReportConversationPrompt control={reportControl} />
 
       <BlockedByListDialog
         control={blockedByListControl}

src/components/dms/ReportConversationPrompt.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {DialogControlProps} from '#/components/Dialog'
+import * as Prompt from '#/components/Prompt'
+
+export function ReportConversationPrompt({
+  control,
+}: {
+  control: DialogControlProps
+}) {
+  const {_} = useLingui()
+
+  return (
+    <Prompt.Basic
+      control={control}
+      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={() => {}}
+      showCancel={false}
+    />
+  )
+}

src/components/dms/ReportDialog.tsx

@@ -25,17 +25,11 @@ import {RichText} from '../RichText'
 import {Text} from '../Typography'
 import {MessageItemMetadata} from './MessageItem'
 
-type ReportDialogParams =
-  | {
-      type: 'convoAccount'
-      did: string
-      convoId: string
-    }
-  | {
-      type: 'convoMessage'
-      convoId: string
-      message: ChatBskyConvoDefs.MessageView
-    }
+type ReportDialogParams = {
+  type: 'convoMessage'
+  convoId: string
+  message: ChatBskyConvoDefs.MessageView
+}
 
 let ReportDialog = ({
   control,
@@ -76,7 +70,6 @@ function DialogInner({params}: {params: ReportDialogParams}) {
 
 function ReasonStep({
   setReportOption,
-  params,
 }: {
   setReportOption: (reportOption: ReportOption) => void
   params: ReportDialogParams
@@ -87,15 +80,9 @@ function ReasonStep({
     <SelectReportOptionView
       labelers={[]}
       goBack={control.close}
-      params={
-        params.type === 'convoMessage'
-          ? {
-              type: 'convoMessage',
-            }
-          : {
-              type: 'convoAccount',
-            }
-      }
+      params={{
+        type: 'convoMessage',
+      }}
       onSelectReportOption={setReportOption}
     />
   )
@@ -138,17 +125,6 @@ function SubmitStep({
         } satisfies ComAtprotoModerationCreateReport.InputSchema
 
         await getAgent().createModerationReport(report)
-      } else if (params.type === 'convoAccount') {
-        const {convoId, did} = params
-
-        await getAgent().createModerationReport({
-          reasonType: reportOption.reason,
-          subject: {
-            $type: 'com.atproto.admin.defs#repoRef',
-            did,
-          },
-          reason: details + ` — from:dms:${convoId}`,
-        })
       }
     },
     onSuccess: () => {
@@ -163,9 +139,6 @@ function SubmitStep({
       convoMessage: {
         title: _(msg`Report this message`),
       },
-      convoAccount: {
-        title: _(msg`Report this account`),
-      },
     }[params.type]
   }, [_, params])
 

src/lib/moderation/useReportOptions.ts

@@ -16,7 +16,6 @@ interface ReportOptions {
   feedgen: ReportOption[]
   other: ReportOption[]
   convoMessage: ReportOption[]
-  convoAccount: ReportOption[]
 }
 
 export function useReportOptions(): ReportOptions {
@@ -87,19 +86,6 @@ export function useReportOptions(): ReportOptions {
         },
         ...common,
       ],
-      convoAccount: [
-        {
-          reason: ComAtprotoModerationDefs.REASONSPAM,
-          title: _(msg`Spam`),
-          description: _(msg`Excessive or unwanted messages`),
-        },
-        {
-          reason: ComAtprotoModerationDefs.REASONSEXUAL,
-          title: _(msg`Unwanted Sexual Content`),
-          description: _(msg`Inappropriate messages or explicit links`),
-        },
-        ...common,
-      ],
       list: [
         {
           reason: ComAtprotoModerationDefs.REASONVIOLATION,