Add report dialog to LiveStatus dialog

src/components/live/LiveStatusDialog.tsx

@@ -17,6 +17,12 @@ import {unstableCacheProfileView} from '#/state/queries/profile'
 import {android, atoms as a, platform, tokens, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo'
+import {createStaticClick, SimpleInlineLinkText} from '#/components/Link'
+import {
+  ReportDialog,
+  useReportDialogControl,
+} from '#/components/moderation/ReportDialog'
 import * as ProfileCard from '#/components/ProfileCard'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
@@ -94,6 +100,7 @@ export function LiveStatus({
   const queryClient = useQueryClient()
   const openLink = useOpenLink()
   const moderationOpts = useModerationOpts()
+  const reportDialogControl = useReportDialogControl()
 
   return (
     <>
@@ -205,16 +212,38 @@ export function LiveStatus({
             </Button>
           </ProfileCard.Header>
         )}
-        <Text
+        <View
           style={[
-            a.w_full,
+            a.flex_row,
-            a.text_center,
+            a.align_center,
-            t.atoms.text_contrast_low,
+            a.justify_between,
-            a.text_sm,
+            a.flex_1,
+            a.pt_sm,
           ]}>
-          <Trans>Live feature is in beta testing</Trans>
+          <View style={[a.flex_row, a.align_center, a.gap_xs]}>
-        </Text>
+            <CircleInfoIcon size="sm" fill={t.atoms.text_contrast_low.color} />
+            <Text style={[t.atoms.text_contrast_low, a.text_sm, a.flex_1]}>
+              <Trans>Live feature is in beta</Trans>
+            </Text>
+          </View>
+          <SimpleInlineLinkText
+            label={_(msg`Report`)}
+            {...createStaticClick(() => {
+              reportDialogControl.open()
+            })}
+            style={[a.text_sm, a.underline, t.atoms.text_contrast_medium]}>
+            <Trans>Report</Trans>
+          </SimpleInlineLinkText>
+        </View>
       </View>
+
+      <ReportDialog
+        control={reportDialogControl}
+        subject={{
+          ...profile.status,
+          $type: 'app.bsky.actor.defs#statusView',
+        }}
+      />
     </>
   )
 }

src/components/moderation/ReportDialog/action.ts

@@ -70,6 +70,7 @@ export function useSubmitReportMutation() {
           }
           break
         }
+        case 'status':
         case 'post':
         case 'list':
         case 'feed':

src/components/moderation/ReportDialog/copy.ts

@@ -14,6 +14,12 @@ export function useCopyForSubject(subject: ParsedReportSubject) {
           subtitle: _(msg`Why should this user be reviewed?`),
         }
       }
+      case 'status': {
+        return {
+          title: _(msg`Report this livestream`),
+          subtitle: _(msg`Why should this livestream be reviewed?`),
+        }
+      }
       case 'post': {
         return {
           title: _(msg`Report this post`),

src/components/moderation/ReportDialog/types.ts

@@ -18,6 +18,7 @@ export type ReportSubject =
   | $Typed<AppBskyActorDefs.ProfileViewBasic>
   | $Typed<AppBskyActorDefs.ProfileView>
   | $Typed<AppBskyActorDefs.ProfileViewDetailed>
+  | $Typed<AppBskyActorDefs.StatusView>
   | $Typed<AppBskyGraphDefs.ListView>
   | $Typed<AppBskyFeedDefs.GeneratorView>
   | $Typed<AppBskyGraphDefs.StarterPackView>
@@ -38,6 +39,12 @@ export type ParsedReportSubject =
         quote: boolean
       }
     }
+  | {
+      type: 'status'
+      uri: string
+      cid: string
+      nsid: string
+    }
   | {
       type: 'list'
       uri: string

src/components/moderation/ReportDialog/utils/parseReportSubject.ts

@@ -1,5 +1,6 @@
 import {
   AppBskyActorDefs,
+  AppBskyActorStatus,
   AppBskyFeedDefs,
   AppBskyFeedPost,
   AppBskyGraphDefs,
@@ -33,6 +34,21 @@ export function parseReportSubject(
       did: subject.did,
       nsid: 'app.bsky.actor.profile',
     }
+  } else if (AppBskyActorDefs.isStatusView(subject)) {
+    const record = subject.record
+    if (
+      bsky.dangerousIsType<AppBskyActorStatus.Record>(
+        record,
+        AppBskyActorStatus.isRecord,
+      )
+    ) {
+      return {
+        type: 'status',
+        uri: subject.uri,
+        cid: subject.cid,
+        nsid: 'app.bsky.actor.status',
+      }
+    }
   } else if (AppBskyGraphDefs.isListView(subject)) {
     return {
       type: 'list',