Add "Who can reply" controls [WIP] (#1954)

* Add threadgating

* UI improvements

* More ui work

* Remove comment

* Tweak colors

* Add missing keys

* Tweak sizing

* Only show composer option on non-reply

* Flex wrap fix

* Move the threadgate control to the top of the composer

1 files changed, 68 insertions, 0 deletions

diff --git a/src/view/com/composer/threadgate/ThreadgateBtn.tsx b/src/view/com/composer/threadgate/ThreadgateBtn.tsx
new file mode 100644
index 000000000..efc4525ae
--- /dev/null
+++ b/src/view/com/composer/threadgate/ThreadgateBtn.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+import {TouchableOpacity, StyleSheet} from 'react-native'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {HITSLOP_10} from 'lib/constants'
+import {useLingui} from '@lingui/react'
+import {msg} from '@lingui/macro'
+import {useModalControls} from '#/state/modals'
+import {ThreadgateSetting} from '#/state/queries/threadgate'
+
+export function ThreadgateBtn({
+  threadgate,
+  onChange,
+}: {
+  threadgate: ThreadgateSetting[]
+  onChange: (v: ThreadgateSetting[]) => void
+}) {
+  const pal = usePalette('default')
+  const {track} = useAnalytics()
+  const {_} = useLingui()
+  const {openModal} = useModalControls()
+
+  const onPress = () => {
+    track('Composer:ThreadgateOpened')
+    openModal({
+      name: 'threadgate',
+      settings: threadgate,
+      onChange,
+    })
+  }
+
+  return (
+    <TouchableOpacity
+      testID="openReplyGateButton"
+      onPress={onPress}
+      style={styles.button}
+      hitSlop={HITSLOP_10}
+      accessibilityRole="button"
+      accessibilityLabel={_(msg`Who can reply`)}
+      accessibilityHint="">
+      <FontAwesomeIcon
+        icon={['far', 'comments']}
+        style={pal.link as FontAwesomeIconStyle}
+        size={24}
+      />
+      {threadgate.length ? (
+        <FontAwesomeIcon
+          icon="check"
+          size={16}
+          style={pal.link as FontAwesomeIconStyle}
+        />
+      ) : null}
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 6,
+    gap: 4,
+  },
+})