Add report dialog to starter pack screen (#4546)

src/components/ReportDialog/SelectReportOptionView.tsx

@@ -55,6 +55,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 === 'starterpack') {
+      title = _(msg`Report this starter pack`)
+      description = _(msg`Why should this starter pack be reviewed?`)
     } else if (props.params.type === 'convoMessage') {
       title = _(msg`Report this message`)
       description = _(msg`Why should this message be reviewed?`)

src/components/ReportDialog/types.ts

@@ -4,7 +4,7 @@ export type ReportDialogProps = {
   control: Dialog.DialogOuterProps['control']
   params:
     | {
-        type: 'post' | 'list' | 'feedgen' | 'other'
+        type: 'post' | 'list' | 'feedgen' | 'starterpack' | 'other'
         uri: string
         cid: string
       }

src/components/StarterPack/Main/ProfilesList.tsx

@@ -39,7 +39,8 @@ export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
     const bottomBarOffset = useBottomBarOffset(20)
     const {currentAccount} = useSession()
 
-    const {data} = useListMembersQuery(listUri)
+    const [isPTRing, setIsPTRing] = React.useState(false)
+    const {data, refetch} = useListMembersQuery(listUri)
     const profiles = data?.pages.flatMap(p => p.items.map(i => i.subject))
     const isOwn = new AtUri(listUri).host === currentAccount?.did
 
@@ -76,6 +77,12 @@ export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
         }
         showsVerticalScrollIndicator={false}
         desktopFixedHeight
+        refreshing={isPTRing}
+        onRefresh={async () => {
+          setIsPTRing(true)
+          await refetch()
+          setIsPTRing(false)
+        }}
       />
     )
   },

src/lib/moderation/useReportOptions.ts

@@ -13,6 +13,7 @@ interface ReportOptions {
   account: ReportOption[]
   post: ReportOption[]
   list: ReportOption[]
+  starterpack: ReportOption[]
   feedgen: ReportOption[]
   other: ReportOption[]
   convoMessage: ReportOption[]
@@ -94,6 +95,14 @@ export function useReportOptions(): ReportOptions {
         },
         ...common,
       ],
+      starterpack: [
+        {
+          reason: ComAtprotoModerationDefs.REASONVIOLATION,
+          title: _(msg`Name or Description Violates Community Standards`),
+          description: _(msg`Terms used violate community standards`),
+        },
+        ...common,
+      ],
       feedgen: [
         {
           reason: ComAtprotoModerationDefs.REASONVIOLATION,

src/screens/StarterPack/StarterPackScreen.tsx

@@ -7,6 +7,7 @@ import {useNavigation} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {HITSLOP_20} from 'lib/constants'
 import {makeProfileLink, makeStarterPackLink} from 'lib/routes/links'
 import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
 import {shareUrl} from 'lib/sharing'
@@ -23,12 +24,15 @@ import {CenteredView} from 'view/com/util/Views'
 import {bulkWriteFollows} from '#/screens/Onboarding/util'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
-import {useDialogControl} from '#/components/Dialog'
+import {DialogControlProps, useDialogControl} from '#/components/Dialog'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
 import {QrCode_Stroke2_Corner0_Rounded as QrCode} from '#/components/icons/QrCode'
 import {ListMaybePlaceholder} from '#/components/Lists'
 import {Loader} from '#/components/Loader'
 import * as Menu from '#/components/Menu'
+import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 import {FeedsList} from '#/components/StarterPack/Main/FeedsList'
 import {ProfilesList} from '#/components/StarterPack/Main/ProfilesList'
 import {QrCodeDialog} from '#/components/StarterPack/QrCodeDialog'
@@ -126,6 +130,7 @@ function Header({
   const agent = useAgent()
   const queryClient = useQueryClient()
   const qrCodeDialogControl = useDialogControl()
+  const reportDialogControl = useReportDialogControl()
 
   const [isProcessing, setIsProcessing] = React.useState(false)
 
@@ -177,72 +182,7 @@ function Header({
         avatar={undefined}
         creator={creator}
         avatarType="starter-pack">
-        <View style={[a.flex_row, a.gap_sm]}>
+        <View style={[a.gap_sm, isOwn ? a.flex_row_reverse : a.flex_row]}>
-          <Menu.Root>
-            <Menu.Trigger label={_(msg`Repost or quote post`)}>
-              {({props, state}) => (
-                <Pressable
-                  style={[
-                    a.px_lg,
-                    a.py_sm,
-                    a.align_center,
-                    a.justify_center,
-                    a.rounded_sm,
-                    {
-                      backgroundColor: isOwn
-                        ? t.palette.primary_500
-                        : t.palette.contrast_25,
-                    },
-                    (state.hovered || state.pressed) && {
-                      backgroundColor: isOwn
-                        ? t.palette.primary_600
-                        : t.palette.contrast_50,
-                    },
-                  ]}
-                  {...props}>
-                  <Text
-                    style={[
-                      a.font_bold,
-                      {
-                        color: isOwn
-                          ? 'white'
-                          : t.atoms.text_contrast_medium.color,
-                      },
-                    ]}>
-                    <Trans>Share</Trans>
-                  </Text>
-                </Pressable>
-              )}
-            </Menu.Trigger>
-            <Menu.Outer style={{minWidth: 170}}>
-              <Menu.Group>
-                <Menu.Item
-                  label={_(msg`Share link`)}
-                  testID="shareStarterPackLinkBtn"
-                  onPress={() => {
-                    logEvent('starterPack:share', {
-                      starterPack: starterPack.uri,
-                      shareType: 'link',
-                    })
-                    shareUrl(makeStarterPackLink(name, rkey))
-                  }}>
-                  <Menu.ItemText>
-                    <Trans>Share link</Trans>
-                  </Menu.ItemText>
-                  <Menu.ItemIcon icon={ArrowOutOfBox} position="right" />
-                </Menu.Item>
-                <Menu.Item
-                  label={_(msg`Create QR code`)}
-                  testID="createQRCodeBtn"
-                  onPress={qrCodeDialogControl.open}>
-                  <Menu.ItemText>
-                    <Trans>Create QR code</Trans>
-                  </Menu.ItemText>
-                  <Menu.ItemIcon icon={QrCode} position="right" />
-                </Menu.Item>
-              </Menu.Group>
-            </Menu.Outer>
-          </Menu.Root>
           {isOwn ? (
             <Button
               label={_(msg`Edit`)}
@@ -268,6 +208,13 @@ function Header({
               </ButtonText>
             </Button>
           )}
+          <Dropdown
+            name={name}
+            rkey={rkey}
+            starterPack={starterPack}
+            qrCodeDialogControl={qrCodeDialogControl}
+            reportDialogControl={reportDialogControl}
+          />
         </View>
       </ProfileSubpageHeader>
       <View style={[a.px_md, a.py_lg, a.gap_md]}>
@@ -282,6 +229,131 @@ function Header({
         ) : null}
       </View>
       <QrCodeDialog control={qrCodeDialogControl} starterPack={starterPack} />
+      <ReportDialog
+        control={reportDialogControl}
+        params={{
+          type: 'starterpack',
+          uri: starterPack.list!.uri,
+          cid: starterPack.list!.cid,
+        }}
+      />
     </>
   )
 }
+
+function Dropdown({
+  name,
+  rkey,
+  starterPack,
+  qrCodeDialogControl,
+  reportDialogControl,
+}: {
+  name: string
+  rkey: string
+  starterPack: AppBskyGraphDefs.StarterPackView
+  qrCodeDialogControl: DialogControlProps
+  reportDialogControl: DialogControlProps
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const {currentAccount} = useSession()
+
+  const isOwn = starterPack.creator.did === currentAccount?.did
+
+  return (
+    <Menu.Root>
+      <Menu.Trigger label={_(msg`Repost or quote post`)}>
+        {({props, state}) => (
+          <>
+            {isOwn ? (
+              <Pressable
+                style={[
+                  a.px_lg,
+                  a.py_sm,
+                  a.align_center,
+                  a.justify_center,
+                  a.rounded_sm,
+                  {
+                    backgroundColor: isOwn
+                      ? t.palette.primary_500
+                      : t.palette.contrast_25,
+                  },
+                  (state.hovered || state.pressed) && {
+                    backgroundColor: isOwn
+                      ? t.palette.primary_600
+                      : t.palette.contrast_50,
+                  },
+                ]}
+                {...props}>
+                <Text
+                  style={[
+                    a.font_bold,
+                    {
+                      color: isOwn
+                        ? 'white'
+                        : t.atoms.text_contrast_medium.color,
+                    },
+                  ]}>
+                  <Trans>Share</Trans>
+                </Text>
+              </Pressable>
+            ) : (
+              <Pressable
+                {...props}
+                hitSlop={HITSLOP_20}
+                style={[
+                  a.justify_center,
+                  a.align_center,
+                  a.rounded_full,
+                  {height: 36, width: 36},
+                  t.atoms.bg_contrast_50,
+                  (state.hovered || state.pressed) && [t.atoms.bg_contrast_100],
+                ]}
+                testID="headerDropdownBtn">
+                <Ellipsis size="lg" fill={t.atoms.text_contrast_medium.color} />
+              </Pressable>
+            )}
+          </>
+        )}
+      </Menu.Trigger>
+      <Menu.Outer style={{minWidth: 170}}>
+        <Menu.Group>
+          <Menu.Item
+            label={_(msg`Share link`)}
+            testID="shareStarterPackLinkBtn"
+            onPress={() => {
+              logEvent('starterPack:share', {
+                starterPack: starterPack.uri,
+                shareType: 'link',
+              })
+              shareUrl(makeStarterPackLink(name, rkey))
+            }}>
+            <Menu.ItemText>
+              <Trans>Share link</Trans>
+            </Menu.ItemText>
+            <Menu.ItemIcon icon={ArrowOutOfBox} position="right" />
+          </Menu.Item>
+          <Menu.Item
+            label={_(msg`Create QR code`)}
+            testID="createQRCodeBtn"
+            onPress={qrCodeDialogControl.open}>
+            <Menu.ItemText>
+              <Trans>Create QR code</Trans>
+            </Menu.ItemText>
+            <Menu.ItemIcon icon={QrCode} position="right" />
+          </Menu.Item>
+        </Menu.Group>
+        {!isOwn && (
+          <Menu.Item
+            label={_(msg`Report starter pack`)}
+            onPress={reportDialogControl.open}>
+            <Menu.ItemText>
+              <Trans>Report starter pack</Trans>
+            </Menu.ItemText>
+            <Menu.ItemIcon icon={CircleInfo} position="right" />
+          </Menu.Item>
+        )}
+      </Menu.Outer>
+    </Menu.Root>
+  )
+}