Update ModerationDetailsDialog

src/components/ModerationDetailsDialog.tsx

@@ -7,29 +7,39 @@ import {ModerationCause} from '@atproto/api'
 import {atoms as a, useBreakpoints} from '#/alf'
 import {Text} from '#/components/Typography'
 import * as Dialog from '#/components/Dialog'
-import {GlobalDialogProps} from '#/components/dialogs'
 import {Button} from '#/components/Button'
 import {InlineLink} from '#/components/Link'
 import {useLabelStrings} from '#/lib/moderation/useLabelStrings'
 import {listUriToHref} from '#/lib/strings/url-helpers'
 
+export {useDialogControl as useModerationDetailsDialogControl} from '#/components/Dialog'
+
 export interface ModerationDetailsDialogProps {
+  control: Dialog.DialogOuterProps['control']
   context: 'account' | 'content'
   modcause: ModerationCause
 }
 
-export function ModerationDetailsDialog({
+export function ModerationDetailsDialog(props: ModerationDetailsDialogProps) {
-  params,
+  return (
-  cleanup,
+    <Dialog.Outer control={props.control}>
-}: GlobalDialogProps<ModerationDetailsDialogProps>) {
+      <Dialog.Handle />
+
+      <ModerationDetailsDialogInner {...props} />
+    </Dialog.Outer>
+  )
+}
+
+function ModerationDetailsDialogInner({
+  context,
+  modcause,
+}: ModerationDetailsDialogProps & {
+  control: Dialog.DialogOuterProps['control']
+}) {
   const {_} = useLingui()
   const labelStrings = useLabelStrings()
   const control = Dialog.useDialogControl()
   const {gtMobile} = useBreakpoints()
-  const {context, modcause} = params
-
-  // REQUIRED CLEANUP
-  const onClose = React.useCallback(() => cleanup(), [cleanup])
 
   let name
   let description
@@ -99,30 +109,26 @@ export function ModerationDetailsDialog({
   }
 
   return (
-    <Dialog.Outer defaultOpen control={control} onClose={onClose}>
+    <Dialog.ScrollableInner
-      <Dialog.Handle />
+      accessibilityDescribedBy="dialog-description"
-
+      accessibilityLabelledBy="dialog-title">
-      <Dialog.ScrollableInner
+      <Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
-        accessibilityDescribedBy="dialog-description"
+        {name}
-        accessibilityLabelledBy="dialog-title">
+      </Text>
-        <Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
+      <Text nativeID="dialog-description" style={[a.text_sm]}>
-          {name}
+        {description}
-        </Text>
+      </Text>
-        <Text nativeID="dialog-description" style={[a.text_sm]}>
+      <View style={gtMobile && [a.flex_row, a.justify_end]}>
-          {description}
+        <Button
-        </Text>
+          testID="doneBtn"
-        <View style={gtMobile && [a.flex_row, a.justify_end]}>
+          variant="outline"
-          <Button
+          color="primary"
-            testID="doneBtn"
+          size="small"
-            variant="outline"
+          onPress={() => control.close()}
-            color="primary"
+          label={_(msg`Done`)}>
-            size="small"
+          {_(msg`Done`)}
-            onPress={() => control.close()}
+        </Button>
-            label={_(msg`Done`)}>
+      </View>
-            {_(msg`Done`)}
+    </Dialog.ScrollableInner>
-          </Button>
-        </View>
-      </Dialog.ScrollableInner>
-    </Dialog.Outer>
   )
 }

src/components/dialogs/Context.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import * as Dialog from '#/components/Dialog'
+
+type Control = Dialog.DialogOuterProps['control']
+
+type ControlsContext = {
+  mutedWordsDialogControl: Control
+}
+
+const ControlsContext = React.createContext({
+  mutedWordsDialogControl: {} as Control,
+})
+
+export function useGlobalDialogsControlContext() {
+  return React.useContext(ControlsContext)
+}
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const mutedWordsDialogControl = Dialog.useDialogControl()
+  const ctx = React.useMemo<ControlsContext>(
+    () => ({mutedWordsDialogControl}),
+    [mutedWordsDialogControl],
+  )
+
+  return (
+    <ControlsContext.Provider value={ctx}>{children}</ControlsContext.Provider>
+  )
+}

src/state/dialogs/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {DialogControlProps} from '#/components/Dialog'
 import {Provider as GlobalDialogsProvider} from '#/components/dialogs'
+import {Provider as GlobalDialogsProviderV2} from '#/components/dialogs/Context'
 
 const DialogContext = React.createContext<{
   activeDialogs: React.MutableRefObject<
@@ -28,7 +29,7 @@ export function useDialogStateControlContext() {
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const activeDialogs = React.useRef<
-    Map<string, React.MutableRefObject<DialogControlProps<{}>>>
+    Map<string, React.MutableRefObject<DialogControlProps>>
   >(new Map())
   const closeAllDialogs = React.useCallback(() => {
     activeDialogs.current.forEach(dialog => dialog.current.close())
@@ -38,7 +39,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   return (
     <DialogContext.Provider value={context}>
       <DialogControlContext.Provider value={controls}>
-        <GlobalDialogsProvider>{children}</GlobalDialogsProvider>
+        <GlobalDialogsProvider>
+          <GlobalDialogsProviderV2>{children}</GlobalDialogsProviderV2>
+        </GlobalDialogsProvider>
       </DialogControlContext.Provider>
     </DialogContext.Provider>
   )

src/view/com/util/moderation/ContentHider.tsx

@@ -11,8 +11,10 @@ import {Button, ButtonText, ButtonIcon} from '#/components/Button'
 import {Shield_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
 import {Text} from '#/components/Typography'
-import {ModerationDetailsDialog} from '#/components/dialogs/ModerationDetails'
+import {
-import {useOpenGlobalDialog} from '#/components/dialogs'
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/ModerationDetailsDialog'
 
 export function ContentHider({
   testID,
@@ -32,7 +34,7 @@ export function ContentHider({
   const {_} = useLingui()
   const [override, setOverride] = React.useState(false)
   const {gtMobile} = useBreakpoints()
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
 
   const blur = modui?.blurs[0]
   const desc = useModerationCauseDescription(blur, 'content')
@@ -47,6 +49,12 @@ export function ContentHider({
 
   return (
     <View testID={testID} style={[a.overflow_hidden, style]}>
+      <ModerationDetailsDialog
+        control={control}
+        context="content"
+        modcause={blur}
+      />
+
       <View style={[a.flex_col, a.gap_xs]}>
         <Button
           variant="solid"
@@ -57,10 +65,7 @@ export function ContentHider({
             if (!modui.noOverride) {
               setOverride(v => !v)
             } else {
-              openDialog(ModerationDetailsDialog, {
+              control.open()
-                context: 'content',
-                modcause: blur,
-              })
             }
           }}
           label={desc.name}
@@ -83,10 +88,7 @@ export function ContentHider({
             variant="ghost"
             size="tiny"
             onPress={() => {
-              openDialog(ModerationDetailsDialog, {
+              control.open()
-                context: 'content',
-                modcause: blur,
-              })
             }}
             label={_(msg`Learn more`)}>
             <ButtonText

src/view/com/util/moderation/PostAlerts.tsx

@@ -11,8 +11,10 @@ import {Button, ButtonText, ButtonIcon} from '#/components/Button'
 import {Shield_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
-import {ModerationDetailsDialog} from '#/components/dialogs/ModerationDetails'
+import {
-import {useOpenGlobalDialog} from '#/components/dialogs'
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/ModerationDetailsDialog'
 
 export function PostAlerts({
   modui,
@@ -43,57 +45,67 @@ export function PostAlerts({
 }
 
 function PostInform({cause}: {cause: ModerationCause}) {
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause, 'content')
 
   return (
-    <Button
+    <>
-      label={desc.name}
+      <Button
-      variant="solid"
+        label={desc.name}
-      color="secondary"
+        variant="solid"
-      size="tiny"
+        color="secondary"
-      shape="default"
+        size="tiny"
-      onPress={() => {
+        shape="default"
-        openDialog(ModerationDetailsDialog, {
+        onPress={() => {
-          context: 'content',
+          control.open()
-          modcause: cause,
+        }}>
-        })
+        <ButtonIcon
-      }}>
+          icon={cause.type === 'muted' ? EyeSlash : CircleInfo}
-      <ButtonIcon
+          position="left"
-        icon={cause.type === 'muted' ? EyeSlash : CircleInfo}
+        />{' '}
-        position="left"
+        <ButtonText>{desc.name}</ButtonText>
-      />{' '}
+      </Button>
-      <ButtonText>{desc.name}</ButtonText>
+
-    </Button>
+      <ModerationDetailsDialog
+        control={control}
+        context="content"
+        modcause={cause}
+      />
+    </>
   )
 }
 
 function PostAlert({cause}: {cause: ModerationCause}) {
   const t = useTheme()
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause, 'content')
 
   return (
-    <Button
+    <>
-      label={desc.name}
+      <Button
-      variant="solid"
+        label={desc.name}
-      color="secondary"
+        variant="solid"
-      size="small"
+        color="secondary"
-      shape="default"
+        size="small"
-      onPress={() => {
+        shape="default"
-        openDialog(ModerationDetailsDialog, {
+        onPress={() => {
-          context: 'content',
+          control.open()
-          modcause: cause,
+        }}>
-        })
+        <ButtonIcon icon={Shield} position="left" />
-      }}>
+        <ButtonText style={[a.flex_1, a.text_left]}>
-      <ButtonIcon icon={Shield} position="left" />
+          {desc.name}
-      <ButtonText style={[a.flex_1, a.text_left]}>
+          <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
-        {desc.name}
+            {' — ' /* TODO get actual labeler */}
-        <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
+            <Trans>Bluesky Safety</Trans>
-          {' — ' /* TODO get actual labeler */}
+          </Text>
-          <Trans>Bluesky Safety</Trans>
+        </ButtonText>
-        </Text>
+      </Button>
-      </ButtonText>
+
-    </Button>
+      <ModerationDetailsDialog
+        control={control}
+        context="content"
+        modcause={cause}
+      />
+    </>
   )
 }

src/view/com/util/moderation/PostHider.tsx

@@ -11,8 +11,10 @@ import {useLingui} from '@lingui/react'
 import {Trans, msg} from '@lingui/macro'
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 
-import {ModerationDetailsDialog} from '#/components/dialogs/ModerationDetails'
+import {
-import {useOpenGlobalDialog} from '#/components/dialogs'
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/ModerationDetailsDialog'
 
 interface Props extends ComponentProps<typeof Link> {
   iconSize: number
@@ -33,7 +35,7 @@ export function PostHider({
   const pal = usePalette('default')
   const {_} = useLingui()
   const [override, setOverride] = React.useState(false)
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
   const blur = modui.blurs[0]
   const desc = useModerationCauseDescription(blur, 'content')
 
@@ -69,12 +71,14 @@ export function PostHider({
         override ? {paddingBottom: 0} : undefined,
         pal.view,
       ]}>
+      <ModerationDetailsDialog
+        control={control}
+        context="content"
+        modcause={blur}
+      />
       <Pressable
         onPress={() => {
-          openDialog(ModerationDetailsDialog, {
+          control.open()
-            context: 'content',
-            modcause: blur,
-          })
         }}
         accessibilityRole="button"
         accessibilityLabel={_(msg`Learn more about this warning`)}

src/view/com/util/moderation/ProfileHeaderAlerts.tsx

@@ -11,8 +11,10 @@ import {Button, ButtonText, ButtonIcon} from '#/components/Button'
 import {Shield_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
-import {ModerationDetailsDialog} from '#/components/dialogs/ModerationDetails'
+import {
-import {useOpenGlobalDialog} from '#/components/dialogs'
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/ModerationDetailsDialog'
 
 export function ProfileHeaderAlerts({
   moderation,
@@ -43,57 +45,66 @@ export function ProfileHeaderAlerts({
 }
 
 function ProfileInform({cause}: {cause: ModerationCause}) {
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause, 'account')
 
   return (
-    <Button
+    <>
-      label={desc.name}
+      <Button
-      variant="solid"
+        label={desc.name}
-      color="secondary"
+        variant="solid"
-      size="tiny"
+        color="secondary"
-      shape="default"
+        size="tiny"
-      onPress={() => {
+        shape="default"
-        openDialog(ModerationDetailsDialog, {
+        onPress={() => {
-          context: 'account',
+          control.open()
-          modcause: cause,
+        }}>
-        })
+        <ButtonIcon
-      }}>
+          icon={cause.type === 'muted' ? EyeSlash : CircleInfo}
-      <ButtonIcon
+          position="left"
-        icon={cause.type === 'muted' ? EyeSlash : CircleInfo}
+        />{' '}
-        position="left"
+        <ButtonText>{desc.name}</ButtonText>
-      />{' '}
+      </Button>
-      <ButtonText>{desc.name}</ButtonText>
+
-    </Button>
+      <ModerationDetailsDialog
+        control={control}
+        context="account"
+        modcause={cause}
+      />
+    </>
   )
 }
 
 function ProfileAlert({cause}: {cause: ModerationCause}) {
   const t = useTheme()
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
   const desc = useModerationCauseDescription(cause, 'account')
 
   return (
-    <Button
+    <>
-      label={desc.name}
+      <Button
-      variant="solid"
+        label={desc.name}
-      color="secondary"
+        variant="solid"
-      size="small"
+        color="secondary"
-      shape="default"
+        size="small"
-      onPress={() => {
+        shape="default"
-        openDialog(ModerationDetailsDialog, {
+        onPress={() => {
-          context: 'account',
+          control.open()
-          modcause: cause,
+        }}>
-        })
+        <ButtonIcon icon={Shield} position="left" />
-      }}>
+        <ButtonText style={[a.flex_1, a.text_left]}>
-      <ButtonIcon icon={Shield} position="left" />
+          {desc.name}
-      <ButtonText style={[a.flex_1, a.text_left]}>
+          <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
-        {desc.name}
+            {' — ' /* TODO get actual labeler */}
-        <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
+            <Trans>Bluesky Safety</Trans>
-          {' — ' /* TODO get actual labeler */}
+          </Text>
-          <Trans>Bluesky Safety</Trans>
+        </ButtonText>
-        </Text>
+      </Button>
-      </ButtonText>
+      <ModerationDetailsDialog
-    </Button>
+        control={control}
+        context="account"
+        modcause={cause}
+      />
+    </>
   )
 }

src/view/com/util/moderation/ScreenHider.tsx

@@ -23,8 +23,10 @@ import {useModerationCauseDescription} from '#/lib/moderation/useModerationCause
 import {s} from '#/lib/styles'
 import {CenteredView} from '../Views'
 
-import {ModerationDetailsDialog} from '#/components/dialogs/ModerationDetails'
+import {
-import {useOpenGlobalDialog} from '#/components/dialogs'
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/ModerationDetailsDialog'
 
 export function ScreenHider({
   testID,
@@ -46,7 +48,7 @@ export function ScreenHider({
   const [override, setOverride] = React.useState(false)
   const navigation = useNavigation<NavigationProp>()
   const {isMobile} = useWebMediaQueries()
-  const openDialog = useOpenGlobalDialog()
+  const control = useModerationDetailsDialogControl()
   const blur = modui.blurs[0]
   const desc = useModerationCauseDescription(blur, 'content')
 
@@ -95,10 +97,7 @@ export function ScreenHider({
             </Text>
             <TouchableWithoutFeedback
               onPress={() => {
-                openDialog(ModerationDetailsDialog, {
+                control.open()
-                  context: 'account',
-                  modcause: blur,
-                })
               }}
               accessibilityRole="button"
               accessibilityLabel={_(msg`Learn more about this warning`)}
@@ -107,6 +106,12 @@ export function ScreenHider({
                 <Trans>Learn More</Trans>
               </Text>
             </TouchableWithoutFeedback>
+
+            <ModerationDetailsDialog
+              control={control}
+              context="account"
+              modcause={blur}
+            />
           </>
         )}{' '}
       </Text>