Add first ReportDialog screen

src/components/Dialog/index.tsx

@@ -105,9 +105,9 @@ export function Inner(props: DialogInnerProps) {
   return (
     <BottomSheetView
       style={[
-        a.p_lg,
-        a.pt_3xl,
+        a.p_xl,
         {
+          paddingTop: 40,
           borderTopLeftRadius: 40,
           borderTopRightRadius: 40,
           paddingBottom: insets.bottom + a.pb_5xl.paddingBottom,
@@ -124,9 +124,9 @@ export function ScrollableInner(props: DialogInnerProps) {
     <BottomSheetScrollView
       style={[
         a.flex_1, // main diff is this
-        a.p_lg,
-        a.pt_3xl,
+        a.p_xl,
         {
+          paddingTop: 40,
           borderTopLeftRadius: 40,
           borderTopRightRadius: 40,
         },
@@ -140,21 +140,21 @@ export function ScrollableInner(props: DialogInnerProps) {
 export function Handle() {
   const t = useTheme()
   return (
-    <View
-      style={[
-        a.absolute,
-        a.rounded_sm,
-        a.z_10,
-        {
-          top: a.pt_lg.paddingTop,
-          width: 35,
-          height: 4,
-          alignSelf: 'center',
-          backgroundColor: t.palette.contrast_900,
-          opacity: 0.5,
-        },
-      ]}
-    />
+    <View style={[a.absolute, a.w_full, a.align_center, a.z_10, {height: 40}]}>
+      <View
+        style={[
+          a.rounded_sm,
+          {
+            top: a.pt_lg.paddingTop,
+            width: 35,
+            height: 4,
+            alignSelf: 'center',
+            backgroundColor: t.palette.contrast_900,
+            opacity: 0.5,
+          },
+        ]}
+      />
+    </View>
   )
 }
 

src/components/Dialog/index.web.tsx

@@ -148,7 +148,7 @@ export function Inner({
           a.rounded_md,
           a.w_full,
           a.border,
-          gtMobile ? a.p_xl : a.p_lg,
+          gtMobile ? a.p_2xl : a.p_xl,
           t.atoms.bg,
           {
             maxWidth: 600,

src/components/dialogs/ReportDialog/index.tsx

@@ -1,9 +1,18 @@
 import React from 'react'
-import {View} from 'react-native'
+import {View, Dimensions} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {LABEL_GROUPS, LabelGroupDefinition} from '@atproto/api'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
+import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 import * as Dialog from '#/components/Dialog'
 import {GlobalDialogProps} from '#/components/dialogs'
+import {Button, useButtonContext} from '#/components/Button'
+import {Divider} from '#/components/Divider'
+import {useLabelGroupStrings} from '#/lib/moderation'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
 
 export type ReportDialogProps =
   | {
@@ -16,20 +25,138 @@ export type ReportDialogProps =
       did: string
     }
 
-export function ReportDialog(props: GlobalDialogProps<ReportDialogProps>) {
-  const control = Dialog.useDialogControl()
+function LabelGroupButton({labelGroup}: {labelGroup: string}) {
+  const t = useTheme()
+  const {hovered, focused, pressed} = useButtonContext()
+  const labelGroupStrings = useLabelGroupStrings()
+  const groupInfoStrings = labelGroupStrings[labelGroup]
+  const interacted = hovered || focused || pressed
 
-  const onClose = React.useCallback(() => {
-    props.cleanup()
-  }, [props])
+  const styles = React.useMemo(() => {
+    return {
+      interacted: {
+        backgroundColor: t.palette.contrast_50,
+      },
+    }
+  }, [t])
 
   return (
-    <Dialog.Outer defaultOpen control={control} onClose={onClose}>
-      <Dialog.Inner label="Report Dialog">
-        <View style={{height: 500}}>
-          <Text>hello {JSON.stringify(props)}</Text>
+    <View
+      style={[
+        a.w_full,
+        a.flex_row,
+        a.align_center,
+        a.justify_between,
+        a.p_md,
+        a.rounded_md,
+        {paddingRight: 70},
+        interacted && styles.interacted,
+      ]}>
+      <View style={[a.flex_1, a.gap_xs]}>
+        <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_700]}>
+          {groupInfoStrings.name}
+        </Text>
+        <Text style={[a.leading_tight, {maxWidth: 400}]}>
+          {groupInfoStrings.description}
+        </Text>
+      </View>
+
+      <View
+        style={[
+          a.absolute,
+          a.inset_0,
+          a.justify_center,
+          a.pr_md,
+          {left: 'auto'},
+        ]}>
+        <ChevronRight
+          size="md"
+          fill={
+            hovered ? t.palette.primary_500 : t.atoms.text_contrast_400.color
+          }
+        />
+      </View>
+    </View>
+  )
+}
+
+/**
+ * TODO copyright link out to DMCA
+ * TODO add "other" option
+ */
+export function ReportDialog({
+  params,
+  cleanup,
+}: GlobalDialogProps<ReportDialogProps>) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const insets = useSafeAreaInsets()
+  const control = Dialog.useDialogControl()
+  const [_labelGroup, setLabelGroup] = React.useState<string>('')
+  const labelGroupStrings = useLabelGroupStrings()
+
+  // REQUIRED CLEANUP
+  const onClose = React.useCallback(() => cleanup(), [cleanup])
+
+  const i18n = React.useMemo(() => {
+    let title = _(msg`Report this post`)
+    let description = _(msg`Why should this post be reviewed?`)
+
+    if (params.type === 'user') {
+      title = _(msg`Report this user`)
+      description = _(msg`Why should this user be reviewed?`)
+    }
+
+    return {
+      title,
+      description,
+    }
+  }, [_, params.type])
+
+  const groups = React.useMemo<
+    [keyof typeof LABEL_GROUPS, LabelGroupDefinition][]
+  >(() => {
+    return Object.entries(LABEL_GROUPS).filter(([, def]) => def.configurable)
+  }, [])
+
+  return (
+    <Dialog.Outer
+      defaultOpen
+      control={control}
+      onClose={onClose}
+      nativeOptions={{
+        sheet: {
+          snapPoints: [Dimensions.get('window').height - insets.top],
+        },
+      }}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner label="Report Dialog">
+        <View style={[a.gap_lg]}>
+          <View style={[a.justify_center, a.gap_sm]}>
+            <Text style={[a.text_2xl, a.font_bold]}>{i18n.title}</Text>
+            <Text style={[a.text_md, t.atoms.text_contrast_700]}>
+              {i18n.description}
+            </Text>
+          </View>
+
+          <Divider />
+
+          <View style={[a.gap_sm, {marginHorizontal: a.p_md.padding * -1}]}>
+            {groups.map(([name, def]) => {
+              const groupStrings = labelGroupStrings[name]
+              return (
+                <Button
+                  key={def.id}
+                  label={_(msg`Create report for ${groupStrings.name}`)}
+                  onPress={() => setLabelGroup(name)}>
+                  <LabelGroupButton labelGroup={name} />
+                </Button>
+              )
+            })}
+          </View>
         </View>
-      </Dialog.Inner>
+      </Dialog.ScrollableInner>
     </Dialog.Outer>
   )
 }

src/components/dialogs/index.tsx

@@ -92,7 +92,9 @@ export function GlobalDialog() {
   return React.useMemo(
     () =>
       activeDialogs.map(({component: Comp, props, options}, i) => {
-        return <Comp key={i} {...props} cleanup={cleanup} options={options} />
+        return (
+          <Comp key={i} params={props} cleanup={cleanup} options={options} />
+        )
       }),
     [activeDialogs, cleanup],
   )

src/lib/build-flags.ts

@@ -1,3 +1,4 @@
 export const LOGIN_INCLUDE_DEV_SERVERS = true
 export const PWI_ENABLED = true
 export const NEW_ONBOARDING_ENABLED = true
+export const NEW_REPORT_DIALOG_ENABLED = true

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

@@ -33,6 +33,7 @@ import {isWeb} from '#/platform/detection'
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {useOpenGlobalDialog} from '#/components/dialogs'
 import {ReportDialog} from '#/components/dialogs/ReportDialog'
+import {NEW_REPORT_DIALOG_ENABLED} from '#/lib/build-flags'
 
 let PostDropdownBtn = ({
   testID,
@@ -212,12 +213,15 @@ let PostDropdownBtn = ({
       hasSession && {
         label: _(msg`Report post`),
         onPress() {
-          openDialog(ReportDialog, {type: 'post', uri: postUri, cid: postCid})
-          // openModal({
-          //   name: 'report',
-          //   uri: postUri,
-          //   cid: postCid,
-          // })
+          if (NEW_REPORT_DIALOG_ENABLED) {
+            openDialog(ReportDialog, {type: 'post', uri: postUri, cid: postCid})
+          } else {
+            openModal({
+              name: 'report',
+              uri: postUri,
+              cid: postCid,
+            })
+          }
         },
         testID: 'postDropdownReportBtn',
         icon: {