Handle reports on profile vs content

src/components/dialogs/ReportDialog/index.tsx

@@ -33,7 +33,8 @@ import {useModServicesDetailedInfoQuery} from '#/state/queries/modservice'
 import {
   getLabelGroupsFromLabels,
   getModerationServiceTitle,
-  useConfigurableLabelGroups,
+  useConfigurableContentLabelGroups,
+  useConfigurableProfileLabelGroups,
 } from '#/lib/moderation'
 import {DMCA_LINK} from '#/components/dialogs/ReportDialog/const'
 import {Link} from '#/components/Link'
@@ -42,12 +43,12 @@ import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from
 export type ReportDialogLabelIds = LabelGroupDefinition['id'] | 'other'
 export type ReportDialogProps =
   | {
-      type: 'post'
+      type: 'content'
       uri: string
       cid: string
     }
   | {
-      type: 'user'
+      type: 'profile'
       did: string
     }
 
@@ -384,13 +385,15 @@ export function ReportDialog({
     ReportDialogLabelIds | undefined
   >()
   const labelGroupStrings = useLabelGroupStrings()
-  const groups = useConfigurableLabelGroups()
+  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?`)
     }
@@ -474,34 +477,36 @@ export function ReportDialog({
                 />
               </Button>
 
-              <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>
+              {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>
           </View>
         )}

src/lib/moderation.ts

@@ -39,6 +39,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,

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',