Mr Worldwide™

src/components/dialogs/Context.tsx

@@ -3,6 +3,7 @@ import {createContext, useContext, useMemo, useState} from 'react'
 import {type AgeAssuranceRedirectDialogState} from '#/components/ageAssurance/AgeAssuranceRedirectDialog'
 import * as Dialog from '#/components/Dialog'
 import {type Screen} from '#/components/dialogs/EmailDialog/types'
+import {type ReportSubject} from '#/components/moderation/ReportDialog'
 
 type Control = Dialog.DialogControlProps
 
@@ -24,6 +25,7 @@ type ControlsContext = {
     share?: boolean
   }>
   ageAssuranceRedirectDialogControl: StatefulControl<AgeAssuranceRedirectDialogState>
+  reportDialogControl: StatefulControl<{subject: ReportSubject}>
 }
 
 const ControlsContext = createContext<ControlsContext | null>(null)
@@ -51,6 +53,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   }>()
   const ageAssuranceRedirectDialogControl =
     useStatefulDialogControl<AgeAssuranceRedirectDialogState>()
+  const reportDialogControl = useStatefulDialogControl<{
+    subject: ReportSubject
+  }>()
 
   const ctx = useMemo<ControlsContext>(
     () => ({
@@ -60,6 +65,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       emailDialogControl,
       linkWarningDialogControl,
       ageAssuranceRedirectDialogControl,
+      reportDialogControl,
     }),
     [
       mutedWordsDialogControl,
@@ -68,6 +74,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       emailDialogControl,
       linkWarningDialogControl,
       ageAssuranceRedirectDialogControl,
+      reportDialogControl,
     ],
   )
 

src/components/live/LiveStatusDialog.tsx

@@ -19,10 +19,7 @@ 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 {
+import {useGlobalReportDialogControl} from '#/components/moderation/ReportDialog'
-  ReportDialog,
-  useReportDialogControl,
-} from '#/components/moderation/ReportDialog'
 import * as ProfileCard from '#/components/ProfileCard'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
@@ -100,7 +97,7 @@ export function LiveStatus({
   const queryClient = useQueryClient()
   const openLink = useOpenLink()
   const moderationOpts = useModerationOpts()
-  const reportDialogControl = useReportDialogControl()
+  const reportDialogControl = useGlobalReportDialogControl()
 
   return (
     <>
@@ -229,21 +226,18 @@ export function LiveStatus({
           <SimpleInlineLinkText
             label={_(msg`Report`)}
             {...createStaticClick(() => {
-              reportDialogControl.open()
+              reportDialogControl.open({
+                subject: {
+                  ...profile.status,
+                  $type: 'app.bsky.actor.defs#statusView',
+                },
+              })
             })}
             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/index.tsx

@@ -16,6 +16,7 @@ import {atoms as a, useGutters, useTheme} from '#/alf'
 import * as Admonition from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
 import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotate'
 import {
@@ -44,10 +45,24 @@ import {
   useReportOptions,
 } from './utils/useReportOptions'
 
+export {type ReportSubject} from './types'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
+export function useGlobalReportDialogControl() {
+  return useGlobalDialogsControlContext().reportDialogControl
+}
+
 const logger = Logger.create(Logger.Context.ReportDialog)
 
+export function GlobalReportDialog() {
+  const {value, control, clear} = useGlobalReportDialogControl()
+  if (!value) {
+    clear()
+    return null
+  }
+  return <ReportDialog control={control} subject={value.subject} />
+}
+
 export function ReportDialog(
   props: Omit<ReportDialogProps, 'subject'> & {
     subject: ReportSubject

src/view/shell/index.tsx

@@ -34,6 +34,7 @@ import {LinkWarningDialog} from '#/components/dialogs/LinkWarning'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {SigninDialog} from '#/components/dialogs/Signin'
+import {GlobalReportDialog} from '#/components/moderation/ReportDialog'
 import {
   Outlet as PolicyUpdateOverlayPortalOutlet,
   usePolicyUpdateContext,
@@ -117,6 +118,7 @@ function ShellInner() {
       <LinkWarningDialog />
       <Lightbox />
       <NuxDialogs />
+      <GlobalReportDialog />
 
       {/* Until policy update has been completed by the user, don't render anything that is portaled */}
       {policyUpdateState.completed && (

src/view/shell/index.web.tsx

@@ -24,6 +24,7 @@ import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {useWelcomeModal} from '#/components/hooks/useWelcomeModal'
+import {GlobalReportDialog} from '#/components/moderation/ReportDialog'
 import {
   Outlet as PolicyUpdateOverlayPortalOutlet,
   usePolicyUpdateContext,
@@ -73,6 +74,7 @@ function ShellInner() {
       <LinkWarningDialog />
       <Lightbox />
       <NuxDialogs />
+      <GlobalReportDialog />
 
       {welcomeModalControl.isOpen && (
         <WelcomeModal control={welcomeModalControl} />