Composer - replace threadgate modal with alf dialog (#4329)

* replace threadgate modal with alf dialog

* add accessibility to selectable

* add aria

* hide spinner once fetched

* add `hasOpenDialogs` value to context

* remove state

* Rm loading state

* Update the threadgate dialog button theming

* Factor out the threadgate editor and add editing to post views

* Mark messages for localization

* Use colors from mute dialog

* Remove unnecessary effect

* Reset state on dialog dismiss

* Clearer CTA

* Fix bugs

* Scope keyboard fix

* Rm getAreDialogsActive (no longer needed)

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 29 insertions, 21 deletions

diff --git a/src/view/com/composer/threadgate/ThreadgateBtn.tsx b/src/view/com/composer/threadgate/ThreadgateBtn.tsx
index 2aefdfbbf..6cf2eea2c 100644
--- a/src/view/com/composer/threadgate/ThreadgateBtn.tsx
+++ b/src/view/com/composer/threadgate/ThreadgateBtn.tsx
@@ -5,11 +5,12 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {isNative} from '#/platform/detection'
-import {useModalControls} from '#/state/modals'
 import {ThreadgateSetting} from '#/state/queries/threadgate'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {ThreadgateEditorDialog} from '#/components/dialogs/ThreadgateEditor'
 import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
 import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe'
 import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
@@ -26,18 +27,15 @@ export function ThreadgateBtn({
   const {track} = useAnalytics()
   const {_} = useLingui()
   const t = useTheme()
-  const {openModal} = useModalControls()
+  const control = Dialog.useDialogControl()
 
   const onPress = () => {
     track('Composer:ThreadgateOpened')
     if (isNative && Keyboard.isVisible()) {
       Keyboard.dismiss()
     }
-    openModal({
-      name: 'threadgate',
-      settings: threadgate,
-      onChange,
-    })
+
+    control.open()
   }
 
   const isEverybody = threadgate.length === 0
@@ -49,19 +47,29 @@ export function ThreadgateBtn({
     : _(msg`Some people can reply`)
 
   return (
-    <Animated.View style={[a.flex_row, a.p_sm, t.atoms.bg, style]}>
-      <Button
-        variant="solid"
-        color="secondary"
-        size="xsmall"
-        testID="openReplyGateButton"
-        onPress={onPress}
-        label={label}>
-        <ButtonIcon
-          icon={isEverybody ? Earth : isNobody ? CircleBanSign : Group}
-        />
-        <ButtonText>{label}</ButtonText>
-      </Button>
-    </Animated.View>
+    <>
+      <Animated.View style={[a.flex_row, a.p_sm, t.atoms.bg, style]}>
+        <Button
+          variant="solid"
+          color="secondary"
+          size="xsmall"
+          testID="openReplyGateButton"
+          onPress={onPress}
+          label={label}
+          accessibilityHint={_(
+            msg`Opens a dialog to choose who can reply to this thread`,
+          )}>
+          <ButtonIcon
+            icon={isEverybody ? Earth : isNobody ? CircleBanSign : Group}
+          />
+          <ButtonText>{label}</ButtonText>
+        </Button>
+      </Animated.View>
+      <ThreadgateEditorDialog
+        control={control}
+        threadgate={threadgate}
+        onChange={onChange}
+      />
+    </>
   )
 }