Merge branch '3p-moderators' of github.com:bluesky-social/social-app into 3p-moderators

assets/icons/squareArrowTopRight_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M14 5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V6.414l-7.293 7.293a1 1 0 0 1-1.414-1.414L17.586 5H14ZM3 6a1 1 0 0 1 1-1h5a1 1 0 0 1 0 2H5v12h12v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6Z" clip-rule="evenodd"/></svg>

src/components/dialogs/ReportDialog/const.ts

@@ -0,0 +1 @@
+export const DMCA_LINK = 'https://bsky.social/about/support/copyright'

src/components/dialogs/ReportDialog/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {View, Dimensions} from 'react-native'
+import {View, Dimensions, Linking} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {AppBskyModerationDefs, LabelGroupDefinition} from '@atproto/api'
@@ -31,31 +31,37 @@ import * as Toast from '#/view/com/util/Toast'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {useModServicesDetailedInfoQuery} from '#/state/queries/modservice'
 import {
-  getLabelGroupsFromLabels,
   getModerationServiceTitle,
-  useConfigurableLabelGroups,
+  useConfigurableContentLabelGroups,
+  useConfigurableProfileLabelGroups,
+  getLabelGroupToLabelerMap,
 } from '#/lib/moderation'
+import {DMCA_LINK} from '#/components/dialogs/ReportDialog/const'
+import {Link} from '#/components/Link'
+import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from '#/components/icons/SquareArrowTopRight'
+// import {getAgent} from '#/state/session'
 
+export type ReportDialogLabelIds = LabelGroupDefinition['id'] | 'other'
 export type ReportDialogProps =
   | {
-      type: 'post'
+      type: 'content'
       uri: string
       cid: string
     }
   | {
-      type: 'user'
+      type: 'profile'
       did: string
     }
 
 function LabelGroupButton({
-  labelGroup,
+  name,
+  description,
 }: {
-  labelGroup: LabelGroupDefinition['id']
+  name: string
+  description: string
 }) {
   const t = useTheme()
   const {hovered, focused, pressed} = useButtonContext()
-  const labelGroupStrings = useLabelGroupStrings()
-  const groupInfoStrings = labelGroupStrings[labelGroup]
   const interacted = hovered || focused || pressed
 
   const styles = React.useMemo(() => {
@@ -80,11 +86,9 @@ function LabelGroupButton({
       ]}>
       <View style={[a.flex_1, a.gap_xs]}>
         <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
-          {groupInfoStrings.name}
-        </Text>
-        <Text style={[a.leading_tight, {maxWidth: 400}]}>
-          {groupInfoStrings.description}
+          {name}
         </Text>
+        <Text style={[a.leading_tight, {maxWidth: 400}]}>{description}</Text>
       </View>
 
       <View
@@ -158,7 +162,7 @@ function SubmitViewLoader({
 }: {
   children: (props: {
     labelers: AppBskyModerationDefs.ModServiceViewDetailed[]
-    labelGroupToModServiceMap: Record<LabelGroupDefinition['id'], string[]>
+    labelGroupToModServiceMap: ReturnType<typeof getLabelGroupToLabelerMap>
   }) => React.ReactNode
 }) {
   const {
@@ -175,25 +179,7 @@ function SubmitViewLoader({
   })
   const labelGroupToModServiceMap = React.useMemo(() => {
     if (!modservices) return {}
-
-    const groups: Partial<
-      Record<
-        LabelGroupDefinition['id'],
-        AppBskyModerationDefs.ModServiceViewDetailed[]
-      >
-    > = {}
-
-    for (const modservice of modservices) {
-      const labelGroups = getLabelGroupsFromLabels(
-        modservice.policies.labelValues,
-      )
-      for (const group of labelGroups) {
-        const g = (groups[group.id] = groups[group.id] || [])
-        g.push(modservice)
-      }
-    }
-
-    return groups
+    return getLabelGroupToLabelerMap(modservices)
   }, [modservices])
 
   const isLoading = isPreferencesLoading || isModServicesLoading
@@ -206,27 +192,24 @@ function SubmitViewLoader({
   ) : error || !(preferences && modservices) ? null : ( // TODO
     children({
       labelers: modservices,
-      // TODO mismatched types
-      // @ts-ignore
       labelGroupToModServiceMap,
     })
   )
 }
 
 function SubmitView({
+  params,
   selectedLabelGroup,
   goBack,
   onSubmitComplete,
   labelGroupToModServiceMap,
 }: {
-  selectedLabelGroup: LabelGroupDefinition['id']
+  params: ReportDialogProps
+  selectedLabelGroup: ReportDialogLabelIds
   goBack: () => void
   onSubmitComplete: () => void
   labelers: AppBskyModerationDefs.ModServiceViewDetailed[]
-  labelGroupToModServiceMap: Record<
-    LabelGroupDefinition['id'],
-    AppBskyModerationDefs.ModServiceViewDetailed[]
-  >
+  labelGroupToModServiceMap: ReturnType<typeof getLabelGroupToLabelerMap>
 }) {
   const t = useTheme()
   const {_} = useLingui()
@@ -240,12 +223,28 @@ function SubmitView({
   const submit = React.useCallback(async () => {
     setSubmitting(true)
     await new Promise(resolve => setTimeout(resolve, 1000))
+
+    const $type =
+      params.type === 'content'
+        ? 'com.atproto.repo.strongRef'
+        : 'com.atproto.admin.defs#repoRef'
+    const report = {
+      reasonType: selectedLabelGroup, // TODO map to reasons
+      subject: {
+        $type,
+        ...params,
+      },
+      reason: details,
+    }
+    console.log(report)
+    // await getAgent().createModerationReport(report)
+
     setSubmitting(false)
 
     Toast.show(`Thank you. Your report has been sent.`)
 
     onSubmitComplete()
-  }, [onSubmitComplete])
+  }, [params, details, selectedLabelGroup, onSubmitComplete])
 
   return (
     <View style={[a.gap_2xl]}>
@@ -364,31 +363,30 @@ function SubmitView({
   )
 }
 
-/**
- * TODO copyright link out to DMCA
- * TODO add "other" option
- */
 export function ReportDialog({
   params,
   cleanup,
 }: GlobalDialogProps<ReportDialogProps>) {
+  // REQUIRED CLEANUP
+  const onClose = React.useCallback(() => cleanup(), [cleanup])
+
   const t = useTheme()
   const {_} = useLingui()
   const insets = useSafeAreaInsets()
   const control = Dialog.useDialogControl()
   const [selectedLabelGroup, setSelectedLabelGroup] = React.useState<
-    LabelGroupDefinition['id'] | undefined
+    ReportDialogLabelIds | undefined
   >()
   const labelGroupStrings = useLabelGroupStrings()
-
-  // REQUIRED CLEANUP
-  const onClose = React.useCallback(() => cleanup(), [cleanup])
+  const contentGroups = useConfigurableContentLabelGroups()
+  const profileGroups = useConfigurableProfileLabelGroups()
+  const groups = params.type === 'content' ? contentGroups : profileGroups
 
   const i18n = React.useMemo(() => {
     let title = _(msg`Report this post`)
     let description = _(msg`Why should this post be reviewed?`)
 
-    if (params.type === 'user') {
+    if (params.type === 'profile') {
       title = _(msg`Report this user`)
       description = _(msg`Why should this user be reviewed?`)
     }
@@ -399,7 +397,16 @@ export function ReportDialog({
     }
   }, [_, params.type])
 
-  const groups = useConfigurableLabelGroups()
+  const next = React.useCallback(
+    (group: ReportDialogLabelIds | 'copyright') => {
+      if (group === 'copyright') {
+        Linking.openURL(DMCA_LINK)
+      } else {
+        setSelectedLabelGroup(group)
+      }
+    },
+    [setSelectedLabelGroup],
+  )
 
   return (
     <Dialog.Outer
@@ -417,10 +424,9 @@ export function ReportDialog({
         {selectedLabelGroup ? (
           <SubmitViewLoader>
             {props => (
-              // TODO same types mismatch
-              // @ts-ignore
               <SubmitView
                 {...props}
+                params={params}
                 selectedLabelGroup={selectedLabelGroup}
                 goBack={() => setSelectedLabelGroup(undefined)}
                 onSubmitComplete={control.close}
@@ -440,16 +446,59 @@ export function ReportDialog({
 
             <View style={[a.gap_sm, {marginHorizontal: a.p_md.padding * -1}]}>
               {groups.map(def => {
-                const groupStrings = labelGroupStrings[def.id]
+                const strings = labelGroupStrings[def.id]
                 return (
                   <Button
                     key={def.id}
-                    label={_(msg`Create report for ${groupStrings.name}`)}
-                    onPress={() => setSelectedLabelGroup(def.id)}>
-                    <LabelGroupButton labelGroup={def.id} />
+                    label={_(msg`Create report for ${strings.name}`)}
+                    onPress={() => next(def.id)}>
+                    <LabelGroupButton
+                      name={strings.name}
+                      description={strings.description}
+                    />
                   </Button>
                 )
               })}
+
+              <Button
+                label={_(msg`Create report for other reasons`)}
+                onPress={() => next('other')}>
+                <LabelGroupButton
+                  name="Other"
+                  description="An issue not covered by another option"
+                />
+              </Button>
+
+              {params.type === 'content' && (
+                <View style={[a.pt_md, a.px_md]}>
+                  <View
+                    style={[
+                      a.flex_row,
+                      a.align_center,
+                      a.justify_between,
+                      a.gap_md,
+                      a.p_md,
+                      a.pl_lg,
+                      a.rounded_md,
+                      t.atoms.bg_contrast_900,
+                    ]}>
+                    <Text style={[t.atoms.text_inverted, a.italic]}>
+                      Need to report a copyright violation?
+                    </Text>
+                    <Link
+                      to={DMCA_LINK}
+                      label={_(
+                        msg`View details for reporting a copyright violation`,
+                      )}
+                      size="small"
+                      variant="solid"
+                      color="secondary">
+                      <ButtonText>View details</ButtonText>
+                      <ButtonIcon position="right" icon={SquareArrowTopRight} />
+                    </Link>
+                  </View>
+                </View>
+              )}
             </View>
           </View>
         )}

src/components/icons/SquareArrowTopRight.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const SquareArrowTopRight_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M14 5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V6.414l-7.293 7.293a1 1 0 0 1-1.414-1.414L17.586 5H14ZM3 6a1 1 0 0 1 1-1h5a1 1 0 0 1 0 2H5v12h12v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6Z',
+})

src/lib/moderation.ts

@@ -1,5 +1,11 @@
 import React from 'react'
-import {ModerationCause, LABEL_GROUPS, LabelGroupDefinition} from '@atproto/api'
+import {
+  ModerationCause,
+  LABEL_GROUPS,
+  LabelGroupDefinition,
+  AppBskyModerationDefs,
+} from '@atproto/api'
+
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 
@@ -39,6 +45,33 @@ export function useConfigurableLabelGroups() {
   return React.useMemo(() => getConfigurableLabelGroups(), [])
 }
 
+export function useConfigurableContentLabelGroups() {
+  return React.useMemo(() => {
+    const groups = getConfigurableLabelGroups()
+    return groups.filter(group => {
+      return group.labels.every(l => l.targets.includes('content'))
+    })
+  }, [])
+}
+
+export function useConfigurableProfileLabelGroups() {
+  return React.useMemo(() => {
+    const groups = getConfigurableLabelGroups()
+    return groups.filter(group => {
+      return group.labels.every(l => l.targets.includes('profile'))
+    })
+  }, [])
+}
+
+export function useConfigurableAccountLabelGroups() {
+  return React.useMemo(() => {
+    const groups = getConfigurableLabelGroups()
+    return groups.filter(group => {
+      return group.labels.every(l => l.targets.includes('account'))
+    })
+  }, [])
+}
+
 export function getModerationServiceTitle({
   displayName,
   handle,
@@ -50,3 +83,31 @@ export function getModerationServiceTitle({
     ? sanitizeDisplayName(displayName)
     : sanitizeHandle(handle, '@')
 }
+
+export function getLabelGroupToLabelerMap(
+  labelers: AppBskyModerationDefs.ModServiceViewDetailed[],
+) {
+  if (!labelers) return {}
+
+  const groups: Partial<
+    Record<
+      LabelGroupDefinition['id'] | 'other',
+      AppBskyModerationDefs.ModServiceViewDetailed[]
+    >
+  > = {
+    // `other` reports go to all labelers TODO confirm this
+    other: labelers,
+  }
+
+  for (const modservice of labelers) {
+    const labelGroups = getLabelGroupsFromLabels(
+      modservice.policies.labelValues,
+    )
+    for (const group of labelGroups) {
+      const g = (groups[group.id] = groups[group.id] || [])
+      g.push(modservice)
+    }
+  }
+
+  return groups
+}

src/lib/moderation/useLabelGroupStrings.ts

@@ -4,7 +4,7 @@ import {useLingui} from '@lingui/react'
 import {useMemo} from 'react'
 
 export type LabelGroupStrings = Record<
-  keyof typeof LABEL_GROUPS,
+  keyof typeof LABEL_GROUPS | 'other',
   {name: string; description: string}
 >
 
@@ -116,6 +116,10 @@ export function useLabelGroupStrings(): LabelGroupStrings {
           msg`Helpful annotations to explain intent, such as satire or parody.`,
         ),
       },
+      other: {
+        name: _(msg`Other`),
+        description: _(msg`Other content not covered by the other categories.`),
+      },
     }),
     [_],
   )

src/screens/Moderation/SettingsDialog.tsx

@@ -24,8 +24,7 @@ function LabelerToggle({
   preferences: UsePreferencesQueryResponse
 }) {
   const t = useTheme()
-  const {mutateAsync, variables, reset} =
-    useModServiceLabelGroupEnableMutation()
+  const {mutateAsync, variables} = useModServiceLabelGroupEnableMutation()
 
   const modservicePreferences = preferences.moderationOpts.mods.find(
     ({did}) => did === labeler.creator.did,
@@ -46,12 +45,11 @@ function LabelerToggle({
         group: labelGroup,
         enabled: !enabled,
       })
-      reset() // Important: clears query `variables`
     } catch (e: any) {
       // TODO
       console.error(e)
     }
-  }, [mutateAsync, enabled, modservicePreferences, labelGroup, reset])
+  }, [mutateAsync, enabled, modservicePreferences, labelGroup])
   return (
     <Toggle.Item
       name={labeler.creator.did}

src/screens/ProfileModerationService/PreferenceRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {View} from 'react-native'
 import {useLingui} from '@lingui/react'
+import {msg} from '@lingui/macro'
 // import {msg} from '@lingui/macro'
 import {LABEL_GROUPS} from '@atproto/api'
 // TODO
@@ -24,7 +25,7 @@ export function PreferenceRow({
   const {_} = useLingui()
   const labelGroupStrings = useLabelGroupStrings()
   const groupInfoStrings = labelGroupStrings[labelGroup]
-  const {mutateAsync, variables, reset} = useModServiceLabelGroupEnableMutation()
+  const {mutateAsync, variables} = useModServiceLabelGroupEnableMutation()
   const enabled =
     variables?.enabled ??
     !modservicePreferences?.disabledLabelGroups?.includes(labelGroup)
@@ -37,12 +38,11 @@ export function PreferenceRow({
         group: labelGroup,
         enabled: !enabled,
       })
-      reset() // Important: clears query `variables`
     } catch (e: any) {
       // TODO
       console.error(e)
     }
-  }, [mutateAsync, enabled, modservicePreferences, labelGroup, reset])
+  }, [mutateAsync, enabled, modservicePreferences, labelGroup])
 
   return (
     <View
@@ -65,7 +65,7 @@ export function PreferenceRow({
             name="enable"
             value={enabled}
             onChange={onToggleEnabled}
-            label="Enable">
+            label={_(msg`Enable`)}>
             <Toggle.Label>{enabled ? 'Enabled' : 'Disabled'}</Toggle.Label>
             <Toggle.Switch />
           </Toggle.Item>

src/view/com/profile/ProfileHeader.tsx

@@ -58,6 +58,9 @@ import {LabelInfo} from '../util/moderation/LabelInfo'
 import {useProfileShadow} from 'state/cache/profile-shadow'
 import * as ModerationServiceCard from '#/components/ModerationServiceCard'
 import {getModerationServiceTitle} from '#/lib/moderation'
+import {useOpenGlobalDialog} from '#/components/dialogs'
+import {ReportDialog} from '#/components/dialogs/ReportDialog'
+import {NEW_REPORT_DIALOG_ENABLED} from '#/lib/build-flags'
 
 import {useTheme} from '#/alf'
 
@@ -119,6 +122,7 @@ let ProfileHeader = ({
     () => moderateProfile(profile, moderationOpts),
     [profile, moderationOpts],
   )
+  const openDialog = useOpenGlobalDialog()
 
   const invalidateProfileQuery = React.useCallback(() => {
     queryClient.invalidateQueries({
@@ -280,11 +284,15 @@ let ProfileHeader = ({
 
   const onPressReportAccount = React.useCallback(() => {
     track('ProfileHeader:ReportAccountButtonClicked')
-    openModal({
-      name: 'report',
-      did: profile.did,
-    })
-  }, [track, openModal, profile])
+    if (NEW_REPORT_DIALOG_ENABLED) {
+      openDialog(ReportDialog, {type: 'profile', did: profile.did})
+    } else {
+      openModal({
+        name: 'report',
+        did: profile.did,
+      })
+    }
+  }, [track, openModal, profile, openDialog])
 
   const isMe = React.useMemo(
     () => currentAccount?.did === profile.did,

src/view/com/util/forms/PostDropdownBtn.tsx

@@ -214,7 +214,11 @@ let PostDropdownBtn = ({
         label: _(msg`Report post`),
         onPress() {
           if (NEW_REPORT_DIALOG_ENABLED) {
-            openDialog(ReportDialog, {type: 'post', uri: postUri, cid: postCid})
+            openDialog(ReportDialog, {
+              type: 'content',
+              uri: postUri,
+              cid: postCid,
+            })
           } else {
             openModal({
               name: 'report',