diff options
Diffstat (limited to 'src')
21 files changed, 883 insertions, 148 deletions
diff --git a/src/lib/analytics/types.ts b/src/lib/analytics/types.ts index 9883cc36e..3d2ebb312 100644 --- a/src/lib/analytics/types.ts +++ b/src/lib/analytics/types.ts @@ -21,6 +21,7 @@ interface TrackPropertiesMap { 'Composer:PastedPhotos': {} 'Composer:CameraOpened': {} 'Composer:GalleryOpened': {} + 'Composer:ThreadgateOpened': {} 'HomeScreen:PressCompose': {} 'ProfileScreen:PressCompose': {} // EDIT PROFILE events diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts index a78abcacd..d94ee4643 100644 --- a/src/lib/api/index.ts +++ b/src/lib/api/index.ts @@ -3,6 +3,7 @@ import { AppBskyEmbedExternal, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, + AppBskyFeedThreadgate, AppBskyRichtextFacet, BskyAgent, ComAtprotoLabelDefs, @@ -16,6 +17,7 @@ import {isWeb} from 'platform/detection' import {ImageModel} from 'state/models/media/image' import {shortenLinks} from 'lib/strings/rich-text-manip' import {logger} from '#/logger' +import {ThreadgateSetting} from '#/state/queries/threadgate' export interface ExternalEmbedDraft { uri: string @@ -54,6 +56,7 @@ interface PostOpts { extLink?: ExternalEmbedDraft images?: ImageModel[] labels?: string[] + threadgate?: ThreadgateSetting[] onStateChange?: (state: string) => void langs?: string[] } @@ -227,9 +230,10 @@ export async function post(agent: BskyAgent, opts: PostOpts) { langs = opts.langs.slice(0, 3) } + let res try { opts.onStateChange?.('Posting...') - return await agent.post({ + res = await agent.post({ text: rt.text, facets: rt.facets, reply, @@ -247,6 +251,52 @@ export async function post(agent: BskyAgent, opts: PostOpts) { throw e } } + + try { + // TODO: this needs to be batch-created with the post! + if (opts.threadgate?.length) { + await createThreadgate(agent, res.uri, opts.threadgate) + } + } catch (e: any) { + console.error(`Failed to create threadgate: ${e.toString()}`) + throw new Error( + 'Post reply-controls failed to be set. Your post was created but anyone can reply to it.', + ) + } + + return res +} + +async function createThreadgate( + agent: BskyAgent, + postUri: string, + threadgate: ThreadgateSetting[], +) { + let allow: ( + | AppBskyFeedThreadgate.MentionRule + | AppBskyFeedThreadgate.FollowingRule + | AppBskyFeedThreadgate.ListRule + )[] = [] + if (!threadgate.find(v => v.type === 'nobody')) { + for (const rule of threadgate) { + if (rule.type === 'mention') { + allow.push({$type: 'app.bsky.feed.threadgate#mentionRule'}) + } else if (rule.type === 'following') { + allow.push({$type: 'app.bsky.feed.threadgate#followingRule'}) + } else if (rule.type === 'list') { + allow.push({ + $type: 'app.bsky.feed.threadgate#listRule', + list: rule.list, + }) + } + } + } + + const postUrip = new AtUri(postUri) + await agent.api.app.bsky.feed.threadgate.create( + {repo: agent.session!.did, rkey: postUrip.rkey}, + {post: postUri, createdAt: new Date().toISOString(), allow}, + ) } // helpers diff --git a/src/locale/locales/cs/messages.po b/src/locale/locales/cs/messages.po index 48c587eb9..ce4ebf113 100644 --- a/src/locale/locales/cs/messages.po +++ b/src/locale/locales/cs/messages.po @@ -51,6 +51,10 @@ msgstr "" msgid "{message}" msgstr "" +#: src/view/com/threadgate/WhoCanReply.tsx:130 +msgid "<0/> members" +msgstr "" + #: src/view/com/auth/onboarding/RecommendedFeeds.tsx:30 msgid "<0>Choose your</0><1>Recommended</1><2>Feeds</2>" msgstr "" @@ -804,6 +808,10 @@ msgstr "" msgid "Error:" msgstr "" +#: src/view/com/modals/Threadgate.tsx:76 +msgid "Everybody" +msgstr "" + #: src/view/com/lightbox/Lightbox.web.tsx:156 msgid "Expand alt text" msgstr "" @@ -866,6 +874,10 @@ msgstr "" msgid "Follow some users to get started. We can recommend you more users based on who you find interesting." msgstr "" +#: src/view/com/modals/Threadgate.tsx:98 +msgid "Followed users" +msgstr "" + #: src/view/screens/PreferencesHomeFeed.tsx:145 msgid "Followed users only" msgstr "" @@ -1360,6 +1372,10 @@ msgstr "" msgid "No results found for {query}" msgstr "" +#: src/view/com/modals/Threadgate.tsx:82 +msgid "Nobody" +msgstr "" + #: src/view/com/modals/SelfLabel.tsx:136 #~ msgid "Not Applicable" #~ msgstr "" @@ -1649,6 +1665,10 @@ msgstr "" msgid "Removed from list" msgstr "" +#: src/view/com/threadgate/WhoCanReply.tsx:74 +msgid "Replies to this thread are disabled" +msgstr "" + #: src/view/screens/PreferencesHomeFeed.tsx:135 msgid "Reply Filters" msgstr "" @@ -2241,6 +2261,14 @@ msgstr "" msgid "Users" msgstr "" +#: src/view/com/threadgate/WhoCanReply.tsx:115 +msgid "Users followed by <0/>" +msgstr "" + +#: src/view/com/modals/Threadgate.tsx:106 +msgid "Users in \"{0}\"" +msgstr "" + #: src/view/screens/Settings.tsx:750 msgid "Verify email" msgstr "" @@ -2306,6 +2334,15 @@ msgstr "" msgid "Which languages would you like to see in your algorithmic feeds?" msgstr "" +#: src/view/com/composer/threadgate/ThreadgateBtn.tsx:43 +#: src/view/com/modals/Threadgate.tsx:66 +msgid "Who can reply" +msgstr "" + +#: src/view/com/threadgate/WhoCanReply.tsx:79 +msgid "Who can reply?" +msgstr "" + #: src/view/com/modals/crop-image/CropImage.web.tsx:102 msgid "Wide" msgstr "" diff --git a/src/locale/locales/en/messages.po b/src/locale/locales/en/messages.po index 7a4a182cc..e3d076dbc 100644 --- a/src/locale/locales/en/messages.po +++ b/src/locale/locales/en/messages.po @@ -51,6 +51,10 @@ msgstr "" msgid "{message}" msgstr "" +#: src/view/com/threadgate/WhoCanReply.tsx:130 +msgid "<0/> members" +msgstr "" + #: src/view/com/auth/onboarding/RecommendedFeeds.tsx:30 msgid "<0>Choose your</0><1>Recommended</1><2>Feeds</2>" msgstr "" @@ -812,6 +816,10 @@ msgstr "" msgid "Error:" msgstr "" +#: src/view/com/modals/Threadgate.tsx:76 +msgid "Everybody" +msgstr "" + #: src/view/com/lightbox/Lightbox.web.tsx:156 msgid "Expand alt text" msgstr "" @@ -875,6 +883,10 @@ msgstr "" msgid "Follow some users to get started. We can recommend you more users based on who you find interesting." msgstr "" +#: src/view/com/modals/Threadgate.tsx:98 +msgid "Followed users" +msgstr "" + #: src/view/screens/PreferencesHomeFeed.tsx:145 msgid "Followed users only" msgstr "" @@ -1382,6 +1394,10 @@ msgstr "" msgid "No results found for {query}" msgstr "" +#: src/view/com/modals/Threadgate.tsx:82 +msgid "Nobody" +msgstr "" + #: src/view/com/modals/SelfLabel.tsx:136 #~ msgid "Not Applicable" #~ msgstr "" @@ -2275,6 +2291,14 @@ msgstr "" msgid "Users" msgstr "" +#: src/view/com/threadgate/WhoCanReply.tsx:115 +msgid "Users followed by <0/>" +msgstr "" + +#: src/view/com/modals/Threadgate.tsx:106 +msgid "Users in \"{0}\"" +msgstr "" + #: src/view/screens/Settings.tsx:750 msgid "Verify email" msgstr "" @@ -2340,6 +2364,15 @@ msgstr "" msgid "Which languages would you like to see in your algorithmic feeds?" msgstr "" +#: src/view/com/composer/threadgate/ThreadgateBtn.tsx:43 +#: src/view/com/modals/Threadgate.tsx:66 +msgid "Who can reply" +msgstr "" + +#: src/view/com/threadgate/WhoCanReply.tsx:79 +msgid "Who can reply?" +msgstr "" + #: src/view/com/modals/crop-image/CropImage.web.tsx:102 msgid "Wide" msgstr "" diff --git a/src/locale/locales/es/messages.po b/src/locale/locales/es/messages.po index c1fca7e90..04aef65a1 100644 --- a/src/locale/locales/es/messages.po +++ b/src/locale/locales/es/messages.po @@ -51,6 +51,10 @@ msgstr "" msgid "{message}" msgstr "" +#: src/view/com/threadgate/WhoCanReply.tsx:130 +msgid "<0/> members" +msgstr "" + #: src/view/com/auth/onboarding/RecommendedFeeds.tsx:30 msgid "<0>Choose your</0><1>Recommended</1><2>Feeds</2>" msgstr "" @@ -804,6 +808,10 @@ msgstr "" msgid "Error:" msgstr "" +#: src/view/com/modals/Threadgate.tsx:76 +msgid "Everybody" +msgstr "" + #: src/view/com/lightbox/Lightbox.web.tsx:156 msgid "Expand alt text" msgstr "" @@ -866,6 +874,10 @@ msgstr "" msgid "Follow some users to get started. We can recommend you more users based on who you find interesting." msgstr "" +#: src/view/com/modals/Threadgate.tsx:98 +msgid "Followed users" +msgstr "" + #: src/view/screens/PreferencesHomeFeed.tsx:145 msgid "Followed users only" msgstr "" @@ -1360,6 +1372,10 @@ msgstr "" msgid "No results found for {query}" msgstr "" +#: src/view/com/modals/Threadgate.tsx:82 +msgid "Nobody" +msgstr "" + #: src/view/com/modals/SelfLabel.tsx:136 #~ msgid "Not Applicable" #~ msgstr "" @@ -1649,6 +1665,10 @@ msgstr "" msgid "Removed from list" msgstr "" +#: src/view/com/threadgate/WhoCanReply.tsx:74 +msgid "Replies to this thread are disabled" +msgstr "" + #: src/view/screens/PreferencesHomeFeed.tsx:135 msgid "Reply Filters" msgstr "" @@ -2241,6 +2261,14 @@ msgstr "" msgid "Users" msgstr "" +#: src/view/com/threadgate/WhoCanReply.tsx:115 +msgid "Users followed by <0/>" +msgstr "" + +#: src/view/com/modals/Threadgate.tsx:106 +msgid "Users in \"{0}\"" +msgstr "" + #: src/view/screens/Settings.tsx:750 msgid "Verify email" msgstr "" @@ -2306,6 +2334,15 @@ msgstr "" msgid "Which languages would you like to see in your algorithmic feeds?" msgstr "" +#: src/view/com/composer/threadgate/ThreadgateBtn.tsx:43 +#: src/view/com/modals/Threadgate.tsx:66 +msgid "Who can reply" +msgstr "" + +#: src/view/com/threadgate/WhoCanReply.tsx:79 +msgid "Who can reply?" +msgstr "" + #: src/view/com/modals/crop-image/CropImage.web.tsx:102 msgid "Wide" msgstr "" diff --git a/src/locale/locales/fr/messages.po b/src/locale/locales/fr/messages.po index 414e397c1..0a195de0e 100644 --- a/src/locale/locales/fr/messages.po +++ b/src/locale/locales/fr/messages.po @@ -51,6 +51,10 @@ msgstr "" msgid "{message}" msgstr "" +#: src/view/com/threadgate/WhoCanReply.tsx:130 +msgid "<0/> members" +msgstr "" + #: src/view/com/auth/onboarding/RecommendedFeeds.tsx:30 msgid "<0>Choose your</0><1>Recommended</1><2>Feeds</2>" msgstr "" @@ -804,6 +808,10 @@ msgstr "" msgid "Error:" msgstr "" +#: src/view/com/modals/Threadgate.tsx:76 +msgid "Everybody" +msgstr "" + #: src/view/com/lightbox/Lightbox.web.tsx:156 msgid "Expand alt text" msgstr "" @@ -866,6 +874,10 @@ msgstr "" msgid "Follow some users to get started. We can recommend you more users based on who you find interesting." msgstr "" +#: src/view/com/modals/Threadgate.tsx:98 +msgid "Followed users" +msgstr "" + #: src/view/screens/PreferencesHomeFeed.tsx:145 msgid "Followed users only" msgstr "" @@ -1360,6 +1372,10 @@ msgstr "" msgid "No results found for {query}" msgstr "" +#: src/view/com/modals/Threadgate.tsx:82 +msgid "Nobody" +msgstr "" + #: src/view/com/modals/SelfLabel.tsx:136 #~ msgid "Not Applicable" #~ msgstr "" @@ -1649,6 +1665,10 @@ msgstr "" msgid "Removed from list" msgstr "" +#: src/view/com/threadgate/WhoCanReply.tsx:74 +msgid "Replies to this thread are disabled" +msgstr "" + #: src/view/screens/PreferencesHomeFeed.tsx:135 msgid "Reply Filters" msgstr "" @@ -2241,6 +2261,14 @@ msgstr "" msgid "Users" msgstr "" +#: src/view/com/threadgate/WhoCanReply.tsx:115 +msgid "Users followed by <0/>" +msgstr "" + +#: src/view/com/modals/Threadgate.tsx:106 +msgid "Users in \"{0}\"" +msgstr "" + #: src/view/screens/Settings.tsx:750 msgid "Verify email" msgstr "" @@ -2306,6 +2334,15 @@ msgstr "" msgid "Which languages would you like to see in your algorithmic feeds?" msgstr "" +#: src/view/com/composer/threadgate/ThreadgateBtn.tsx:43 +#: src/view/com/modals/Threadgate.tsx:66 +msgid "Who can reply" +msgstr "" + +#: src/view/com/threadgate/WhoCanReply.tsx:79 +msgid "Who can reply?" +msgstr "" + #: src/view/com/modals/crop-image/CropImage.web.tsx:102 msgid "Wide" msgstr "" diff --git a/src/locale/locales/hi/messages.po b/src/locale/locales/hi/messages.po index 3e907ee3c..7f4ff2dde 100644 --- a/src/locale/locales/hi/messages.po +++ b/src/locale/locales/hi/messages.po @@ -51,6 +51,10 @@ msgstr "" msgid "{message}" msgstr "" +#: src/view/com/threadgate/WhoCanReply.tsx:130 +msgid "<0/> members" +msgstr "" + #: src/view/com/auth/onboarding/RecommendedFeeds.tsx:30 msgid "<0>Choose your</0><1>Recommended</1><2>Feeds</2>" msgstr "<0>अपना</0><1>पसंदीदा</1><2>फ़ीड चुनें</2>" @@ -808,6 +812,10 @@ msgstr "अपने यूज़रनेम और पासवर्ड द msgid "Error:" msgstr "" +#: src/view/com/modals/Threadgate.tsx:76 +msgid "Everybody" +msgstr "" + #: src/view/com/lightbox/Lightbox.web.tsx:156 msgid "Expand alt text" msgstr "ऑल्ट टेक्स्ट" @@ -867,6 +875,10 @@ msgstr "फॉलो" msgid "Follow some users to get started. We can recommend you more users based on who you find interesting." msgstr "आरंभ करने के लिए कुछ उपयोगकर्ताओं का अनुसरण करें. आपको कौन दिलचस्प लगता है, इसके आधार पर हम आपको और अधिक उपयोगकर्ताओं की अनुशंसा कर सकते हैं।" +#: src/view/com/modals/Threadgate.tsx:98 +msgid "Followed users" +msgstr "" + #: src/view/screens/PreferencesHomeFeed.tsx:145 msgid "Followed users only" msgstr "केवल वे यूजर को फ़ॉलो किया गया" @@ -1374,6 +1386,10 @@ msgstr "\"{query}\" के लिए कोई परिणाम नहीं msgid "No results found for {query}" msgstr "" +#: src/view/com/modals/Threadgate.tsx:82 +msgid "Nobody" +msgstr "" + #: src/view/com/modals/SelfLabel.tsx:136 #~ msgid "Not Applicable" #~ msgstr "लागू नहीं" @@ -2267,6 +2283,14 @@ msgstr "यूजर नाम या ईमेल पता" msgid "Users" msgstr "यूजर लोग" +#: src/view/com/threadgate/WhoCanReply.tsx:115 +msgid "Users followed by <0/>" +msgstr "" + +#: src/view/com/modals/Threadgate.tsx:106 +msgid "Users in \"{0}\"" +msgstr "" + #: src/view/screens/Settings.tsx:750 msgid "Verify email" msgstr "ईमेल सत्यापित करें" @@ -2332,6 +2356,15 @@ msgstr "इस पोस्ट में किस भाषा का उपय msgid "Which languages would you like to see in your algorithmic feeds?" msgstr "कौन से भाषाएं आपको अपने एल्गोरिदमिक फ़ीड में देखना पसंद करती हैं?" +#: src/view/com/composer/threadgate/ThreadgateBtn.tsx:43 +#: src/view/com/modals/Threadgate.tsx:66 +msgid "Who can reply" +msgstr "" + +#: src/view/com/threadgate/WhoCanReply.tsx:79 +msgid "Who can reply?" +msgstr "" + #: src/view/com/modals/crop-image/CropImage.web.tsx:102 msgid "Wide" msgstr "चौड़ा" diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx index bff27f84d..81a220d1b 100644 --- a/src/state/modals/index.tsx +++ b/src/state/modals/index.tsx @@ -6,6 +6,7 @@ import {Image as RNImage} from 'react-native-image-crop-picker' import {ImageModel} from '#/state/models/media/image' import {GalleryModel} from '#/state/models/media/gallery' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' +import {ThreadgateSetting} from '../queries/threadgate' export interface ConfirmModal { name: 'confirm' @@ -121,6 +122,12 @@ export interface SelfLabelModal { onChange: (labels: string[]) => void } +export interface ThreadgateModal { + name: 'threadgate' + settings: ThreadgateSetting[] + onChange: (settings: ThreadgateSetting[]) => void +} + export interface ChangeHandleModal { name: 'change-handle' onChanged: () => void @@ -207,6 +214,7 @@ export type Modal = | ServerInputModal | RepostModal | SelfLabelModal + | ThreadgateModal // Bluesky access | WaitlistModal diff --git a/src/state/queries/threadgate.ts b/src/state/queries/threadgate.ts new file mode 100644 index 000000000..489117582 --- /dev/null +++ b/src/state/queries/threadgate.ts @@ -0,0 +1,5 @@ +export type ThreadgateSetting = + | {type: 'nobody'} + | {type: 'mention'} + | {type: 'following'} + | {type: 'list'; list: string} diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index d8af6d0ce..97d443451 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -35,6 +35,7 @@ import {shortenLinks} from 'lib/strings/rich-text-manip' import {toShortUrl} from 'lib/strings/url-helpers' import {SelectPhotoBtn} from './photos/SelectPhotoBtn' import {OpenCameraBtn} from './photos/OpenCameraBtn' +import {ThreadgateBtn} from './threadgate/ThreadgateBtn' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useExternalLinkFetch} from './useExternalLinkFetch' @@ -61,6 +62,7 @@ import {useProfileQuery} from '#/state/queries/profile' import {useComposerControls} from '#/state/shell/composer' import {until} from '#/lib/async/until' import {emitPostCreated} from '#/state/events' +import {ThreadgateSetting} from '#/state/queries/threadgate' type Props = ComposerOpts export const ComposePost = observer(function ComposePost({ @@ -105,6 +107,7 @@ export const ComposePost = observer(function ComposePost({ ) const {extLink, setExtLink} = useExternalLinkFetch({setQuote}) const [labels, setLabels] = useState<string[]>([]) + const [threadgate, setThreadgate] = useState<ThreadgateSetting[]>([]) const [suggestedLinks, setSuggestedLinks] = useState<Set<string>>(new Set()) const gallery = useMemo(() => new GalleryModel(), []) const onClose = useCallback(() => { @@ -220,6 +223,7 @@ export const ComposePost = observer(function ComposePost({ quote, extLink, labels, + threadgate, onStateChange: setProcessingState, langs: toPostLanguages(langPrefs.postLanguage), }) @@ -296,6 +300,12 @@ export const ComposePost = observer(function ComposePost({ onChange={setLabels} hasMedia={hasMedia} /> + {replyTo ? null : ( + <ThreadgateBtn + threadgate={threadgate} + onChange={setThreadgate} + /> + )} {canPost ? ( <TouchableOpacity testID="composerPublishBtn" @@ -458,9 +468,11 @@ const styles = StyleSheet.create({ topbar: { flexDirection: 'row', alignItems: 'center', + paddingTop: 6, paddingBottom: 4, paddingHorizontal: 20, height: 55, + gap: 4, }, topbarDesktop: { paddingTop: 10, @@ -470,6 +482,7 @@ const styles = StyleSheet.create({ borderRadius: 20, paddingHorizontal: 20, paddingVertical: 6, + marginLeft: 12, }, errorLine: { flexDirection: 'row', diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx index ae055f9ac..9964359ac 100644 --- a/src/view/com/composer/Prompt.tsx +++ b/src/view/com/composer/Prompt.tsx @@ -49,6 +49,6 @@ const styles = StyleSheet.create({ paddingLeft: 12, }, labelDesktopWeb: { - paddingLeft: 20, + paddingLeft: 12, }, }) diff --git a/src/view/com/composer/labels/LabelsBtn.tsx b/src/view/com/composer/labels/LabelsBtn.tsx index a10684691..b880dd330 100644 --- a/src/view/com/composer/labels/LabelsBtn.tsx +++ b/src/view/com/composer/labels/LabelsBtn.tsx @@ -38,7 +38,7 @@ export function LabelsBtn({ } openModal({name: 'self-label', labels, hasMedia, onChange}) }}> - <ShieldExclamation style={pal.link} size={26} /> + <ShieldExclamation style={pal.link} size={24} /> {labels.length > 0 ? ( <FontAwesomeIcon icon="check" @@ -54,8 +54,7 @@ const styles = StyleSheet.create({ button: { flexDirection: 'row', alignItems: 'center', - paddingHorizontal: 14, - marginRight: 4, + paddingHorizontal: 6, }, dimmed: { opacity: 0.4, diff --git a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx index 4031afdaa..09a2dcf41 100644 --- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx +++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx @@ -98,7 +98,8 @@ const styles = StyleSheet.create({ backgroundColor: 'transparent', border: 'none', paddingTop: 4, - paddingHorizontal: 10, + paddingLeft: 12, + paddingRight: 12, cursor: 'pointer', }, picker: { 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, + }, +}) diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index 0384e301c..90629d33d 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -16,6 +16,7 @@ import * as ProfilePreviewModal from './ProfilePreview' import * as ServerInputModal from './ServerInput' import * as RepostModal from './Repost' import * as SelfLabelModal from './SelfLabel' +import * as ThreadgateModal from './Threadgate' import * as CreateOrEditListModal from './CreateOrEditList' import * as UserAddRemoveListsModal from './UserAddRemoveLists' import * as ListAddUserModal from './ListAddRemoveUsers' @@ -127,6 +128,9 @@ export function ModalsContainer() { } else if (activeModal?.name === 'self-label') { snapPoints = SelfLabelModal.snapPoints element = <SelfLabelModal.Component {...activeModal} /> + } else if (activeModal?.name === 'threadgate') { + snapPoints = ThreadgateModal.snapPoints + element = <ThreadgateModal.Component {...activeModal} /> } else if (activeModal?.name === 'alt-text-image') { snapPoints = AltImageModal.snapPoints element = <AltImageModal.Component {...activeModal} /> diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index ce1e67fae..12138f54d 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -18,6 +18,7 @@ import * as ListAddUserModal from './ListAddRemoveUsers' import * as DeleteAccountModal from './DeleteAccount' import * as RepostModal from './Repost' import * as SelfLabelModal from './SelfLabel' +import * as ThreadgateModal from './Threadgate' import * as CropImageModal from './crop-image/CropImage.web' import * as AltTextImageModal from './AltImage' import * as EditImageModal from './EditImage' @@ -98,6 +99,8 @@ function Modal({modal}: {modal: ModalIface}) { element = <RepostModal.Component {...modal} /> } else if (modal.name === 'self-label') { element = <SelfLabelModal.Component {...modal} /> + } else if (modal.name === 'threadgate') { + element = <ThreadgateModal.Component {...modal} /> } else if (modal.name === 'change-handle') { element = <ChangeHandleModal.Component {...modal} /> } else if (modal.name === 'waitlist') { diff --git a/src/view/com/modals/Threadgate.tsx b/src/view/com/modals/Threadgate.tsx new file mode 100644 index 000000000..9d78a2e6d --- /dev/null +++ b/src/view/com/modals/Threadgate.tsx @@ -0,0 +1,204 @@ +import React, {useState} from 'react' +import { + Pressable, + StyleProp, + StyleSheet, + TouchableOpacity, + View, + ViewStyle, +} from 'react-native' +import {Text} from '../util/text/Text' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' +import {ScrollView} from 'view/com/modals/util' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {ThreadgateSetting} from '#/state/queries/threadgate' +import {useMyListsQuery} from '#/state/queries/my-lists' +import isEqual from 'lodash.isequal' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' + +export const snapPoints = ['60%'] + +export function Component({ + settings, + onChange, +}: { + settings: ThreadgateSetting[] + onChange: (settings: ThreadgateSetting[]) => void +}) { + const pal = usePalette('default') + const {closeModal} = useModalControls() + const [selected, setSelected] = useState(settings) + const {_} = useLingui() + const {data: lists} = useMyListsQuery('curate') + + const onPressEverybody = () => { + setSelected([]) + onChange([]) + } + + const onPressNobody = () => { + setSelected([{type: 'nobody'}]) + onChange([{type: 'nobody'}]) + } + + const onPressAudience = (setting: ThreadgateSetting) => { + // remove nobody + let newSelected = selected.filter(v => v.type !== 'nobody') + // toggle + const i = newSelected.findIndex(v => isEqual(v, setting)) + if (i === -1) { + newSelected.push(setting) + } else { + newSelected.splice(i, 1) + } + setSelected(newSelected) + onChange(newSelected) + } + + return ( + <View testID="threadgateModal" style={[pal.view, styles.container]}> + <View style={styles.titleSection}> + <Text type="title-lg" style={[pal.text, styles.title]}> + <Trans>Who can reply</Trans> + </Text> + </View> + + <ScrollView> + <Text style={[pal.text, styles.description]}> + Choose "Everybody" or "Nobody" + </Text> + <View style={{flexDirection: 'row', gap: 6, paddingHorizontal: 6}}> + <Selectable + label={_(msg`Everybody`)} + isSelected={selected.length === 0} + onPress={onPressEverybody} + style={{flex: 1}} + /> + <Selectable + label={_(msg`Nobody`)} + isSelected={!!selected.find(v => v.type === 'nobody')} + onPress={onPressNobody} + style={{flex: 1}} + /> + </View> + <Text style={[pal.text, styles.description]}> + Or combine these options: + </Text> + <View style={{flexDirection: 'column', gap: 4, paddingHorizontal: 6}}> + <Selectable + label={_(msg`Mentioned users`)} + isSelected={!!selected.find(v => v.type === 'mention')} + onPress={() => onPressAudience({type: 'mention'})} + /> + <Selectable + label={_(msg`Followed users`)} + isSelected={!!selected.find(v => v.type === 'following')} + onPress={() => onPressAudience({type: 'following'})} + /> + {lists?.length + ? lists.map(list => ( + <Selectable + key={list.uri} + label={_(msg`Users in "${list.name}"`)} + isSelected={ + !!selected.find( + v => v.type === 'list' && v.list === list.uri, + ) + } + onPress={() => + onPressAudience({type: 'list', list: list.uri}) + } + /> + )) + : null} + </View> + </ScrollView> + + <View style={[styles.btnContainer, pal.borderDark]}> + <TouchableOpacity + testID="confirmBtn" + onPress={() => { + closeModal() + }} + style={styles.btn} + accessibilityRole="button" + accessibilityLabel={_(msg`Done`)} + accessibilityHint=""> + <Text style={[s.white, s.bold, s.f18]}> + <Trans>Done</Trans> + </Text> + </TouchableOpacity> + </View> + </View> + ) +} + +function Selectable({ + label, + isSelected, + onPress, + style, +}: { + label: string + isSelected: boolean + onPress: () => void + style?: StyleProp<ViewStyle> +}) { + const pal = usePalette(isSelected ? 'inverted' : 'default') + return ( + <Pressable + onPress={onPress} + accessibilityLabel={label} + accessibilityHint="" + style={[styles.selectable, pal.border, pal.view, style]}> + <Text type="xl" style={[pal.text]}> + {label} + </Text> + {isSelected ? ( + <FontAwesomeIcon icon="check" color={pal.colors.text} size={18} /> + ) : null} + </Pressable> + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingBottom: isWeb ? 0 : 40, + }, + titleSection: { + paddingTop: isWeb ? 0 : 4, + }, + title: { + textAlign: 'center', + fontWeight: '600', + }, + description: { + textAlign: 'center', + paddingVertical: 16, + }, + selectable: { + flexDirection: 'row', + justifyContent: 'space-between', + paddingHorizontal: 18, + paddingVertical: 16, + borderWidth: 1, + borderRadius: 6, + }, + btn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 32, + padding: 14, + backgroundColor: colors.blue3, + }, + btnContainer: { + paddingTop: 20, + paddingHorizontal: 20, + }, +}) diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index cf43d2055..633968c87 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -468,7 +468,7 @@ function* flattenThreadSkeleton( yield PARENT_SPINNER } yield node - if (node.ctx.isHighlightedPost) { + if (node.ctx.isHighlightedPost && !node.post.viewer?.replyDisabled) { yield REPLY_PROMPT } if (node.replies?.length) { diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index a2aa3716e..2636fdfbd 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -44,6 +44,7 @@ import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow' import {ThreadPost} from '#/state/queries/post-thread' import {LabelInfo} from '../util/moderation/LabelInfo' import {useSession} from '#/state/session' +import {WhoCanReply} from '../threadgate/WhoCanReply' export function PostThreadItem({ post, @@ -441,6 +442,7 @@ let PostThreadItemLoaded = ({ </View> </View> </Link> + <WhoCanReply post={post} /> </> ) } else { @@ -450,164 +452,174 @@ let PostThreadItemLoaded = ({ const isThreadedChildAdjacentBot = isThreadedChild && nextPost?.ctx.depth === depth return ( - <PostOuterWrapper - post={post} - depth={depth} - showParentReplyLine={!!showParentReplyLine} - treeView={treeView} - hasPrecedingItem={hasPrecedingItem}> - <PostHider - testID={`postThreadItem-by-${post.author.handle}`} - href={postHref} - style={[pal.view]} - moderation={moderation.content} - iconSize={isThreadedChild ? 26 : 38} - iconStyles={ - isThreadedChild ? {marginRight: 4} : {marginLeft: 2, marginRight: 2} - }> - <PostSandboxWarning /> - - <View - style={{ - flexDirection: 'row', - gap: 10, - paddingLeft: 8, - height: isThreadedChildAdjacentTop ? 8 : 16, - }}> - <View style={{width: 38}}> - {!isThreadedChild && showParentReplyLine && ( - <View - style={[ - styles.replyLine, - { - flexGrow: 1, - backgroundColor: pal.colors.border, - marginBottom: 4, - }, - ]} - /> - )} - </View> - </View> - - <View - style={[ - styles.layout, - { - paddingBottom: - showChildReplyLine && !isThreadedChild - ? 0 - : isThreadedChildAdjacentBot - ? 4 - : 8, - }, - ]}> - {!isThreadedChild && ( - <View style={styles.layoutAvi}> - <PreviewableUserAvatar - size={38} - did={post.author.did} - handle={post.author.handle} - avatar={post.author.avatar} - moderation={moderation.avatar} - /> + <> + <PostOuterWrapper + post={post} + depth={depth} + showParentReplyLine={!!showParentReplyLine} + treeView={treeView} + hasPrecedingItem={hasPrecedingItem}> + <PostHider + testID={`postThreadItem-by-${post.author.handle}`} + href={postHref} + style={[pal.view]} + moderation={moderation.content} + iconSize={isThreadedChild ? 26 : 38} + iconStyles={ + isThreadedChild + ? {marginRight: 4} + : {marginLeft: 2, marginRight: 2} + }> + <PostSandboxWarning /> - {showChildReplyLine && ( + <View + style={{ + flexDirection: 'row', + gap: 10, + paddingLeft: 8, + height: isThreadedChildAdjacentTop ? 8 : 16, + }}> + <View style={{width: 38}}> + {!isThreadedChild && showParentReplyLine && ( <View style={[ styles.replyLine, { flexGrow: 1, backgroundColor: pal.colors.border, - marginTop: 4, + marginBottom: 4, }, ]} /> )} </View> - )} + </View> - <View style={styles.layoutContent}> - <PostMeta - author={post.author} - authorHasWarning={!!post.author.labels?.length} - timestamp={post.indexedAt} - postHref={postHref} - showAvatar={isThreadedChild} - avatarSize={28} - displayNameType="md-bold" - displayNameStyle={isThreadedChild && s.ml2} - style={isThreadedChild && s.mb2} - /> - <PostAlerts - moderation={moderation.content} - style={styles.alert} - /> - {richText?.text ? ( - <View style={styles.postTextContainer}> - <RichText - type="post-text" - richText={richText} - style={[pal.text, s.flex1]} - lineHeight={1.3} - numberOfLines={limitLines ? MAX_POST_LINES : undefined} + <View + style={[ + styles.layout, + { + paddingBottom: + showChildReplyLine && !isThreadedChild + ? 0 + : isThreadedChildAdjacentBot + ? 4 + : 8, + }, + ]}> + {!isThreadedChild && ( + <View style={styles.layoutAvi}> + <PreviewableUserAvatar + size={38} + did={post.author.did} + handle={post.author.handle} + avatar={post.author.avatar} + moderation={moderation.avatar} /> + + {showChildReplyLine && ( + <View + style={[ + styles.replyLine, + { + flexGrow: 1, + backgroundColor: pal.colors.border, + marginTop: 4, + }, + ]} + /> + )} </View> - ) : undefined} - {limitLines ? ( - <TextLink - text="Show More" - style={pal.link} - onPress={onPressShowMore} - href="#" + )} + + <View style={styles.layoutContent}> + <PostMeta + author={post.author} + authorHasWarning={!!post.author.labels?.length} + timestamp={post.indexedAt} + postHref={postHref} + showAvatar={isThreadedChild} + avatarSize={28} + displayNameType="md-bold" + displayNameStyle={isThreadedChild && s.ml2} + style={isThreadedChild && s.mb2} /> - ) : undefined} - {post.embed && ( - <ContentHider - style={styles.contentHider} - moderation={moderation.embed} - moderationDecisions={moderation.decisions} - ignoreMute={isEmbedByEmbedder(post.embed, post.author.did)} - ignoreQuoteDecisions> - <PostEmbeds - embed={post.embed} + <PostAlerts + moderation={moderation.content} + style={styles.alert} + /> + {richText?.text ? ( + <View style={styles.postTextContainer}> + <RichText + type="post-text" + richText={richText} + style={[pal.text, s.flex1]} + lineHeight={1.3} + numberOfLines={limitLines ? MAX_POST_LINES : undefined} + /> + </View> + ) : undefined} + {limitLines ? ( + <TextLink + text="Show More" + style={pal.link} + onPress={onPressShowMore} + href="#" + /> + ) : undefined} + {post.embed && ( + <ContentHider + style={styles.contentHider} moderation={moderation.embed} moderationDecisions={moderation.decisions} - /> - </ContentHider> - )} - <PostCtrls - post={post} - record={record} - onPressReply={onPressReply} - /> + ignoreMute={isEmbedByEmbedder(post.embed, post.author.did)} + ignoreQuoteDecisions> + <PostEmbeds + embed={post.embed} + moderation={moderation.embed} + moderationDecisions={moderation.decisions} + /> + </ContentHider> + )} + <PostCtrls + post={post} + record={record} + onPressReply={onPressReply} + /> + </View> </View> - </View> - {hasMore ? ( - <Link - style={[ - styles.loadMore, - { - paddingLeft: treeView ? 8 : 70, - paddingTop: 0, - paddingBottom: treeView ? 4 : 12, - }, - ]} - href={postHref} - title={itemTitle} - noFeedback> - <Text type="sm-medium" style={pal.textLight}> - More - </Text> - <FontAwesomeIcon - icon="angle-right" - color={pal.colors.textLight} - size={14} - /> - </Link> - ) : undefined} - </PostHider> - </PostOuterWrapper> + {hasMore ? ( + <Link + style={[ + styles.loadMore, + { + paddingLeft: treeView ? 8 : 70, + paddingTop: 0, + paddingBottom: treeView ? 4 : 12, + }, + ]} + href={postHref} + title={itemTitle} + noFeedback> + <Text type="sm-medium" style={pal.textLight}> + More + </Text> + <FontAwesomeIcon + icon="angle-right" + color={pal.colors.textLight} + size={14} + /> + </Link> + ) : undefined} + </PostHider> + </PostOuterWrapper> + <WhoCanReply + post={post} + style={{ + marginTop: 4, + }} + /> + </> ) } } diff --git a/src/view/com/threadgate/WhoCanReply.tsx b/src/view/com/threadgate/WhoCanReply.tsx new file mode 100644 index 000000000..1c34623d8 --- /dev/null +++ b/src/view/com/threadgate/WhoCanReply.tsx @@ -0,0 +1,183 @@ +import React from 'react' +import {StyleProp, View, ViewStyle} from 'react-native' +import { + AppBskyFeedDefs, + AppBskyFeedThreadgate, + AppBskyGraphDefs, + AtUri, +} from '@atproto/api' +import {Trans} from '@lingui/macro' +import {usePalette} from '#/lib/hooks/usePalette' +import {Text} from '../util/text/Text' +import {TextLink} from '../util/Link' +import {makeProfileLink, makeListLink} from '#/lib/routes/links' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' + +import {colors} from '#/lib/styles' + +export function WhoCanReply({ + post, + style, +}: { + post: AppBskyFeedDefs.PostView + style?: StyleProp<ViewStyle> +}) { + const pal = usePalette('default') + const {isMobile} = useWebMediaQueries() + const containerStyles = useColorSchemeStyle( + { + borderColor: pal.colors.unreadNotifBorder, + backgroundColor: pal.colors.unreadNotifBg, + }, + { + borderColor: pal.colors.unreadNotifBorder, + backgroundColor: pal.colors.unreadNotifBg, + }, + ) + const iconStyles = useColorSchemeStyle( + { + backgroundColor: colors.blue3, + }, + { + backgroundColor: colors.blue3, + }, + ) + const textStyles = useColorSchemeStyle( + {color: colors.gray7}, + {color: colors.blue1}, + ) + const record = React.useMemo( + () => + post.threadgate && + AppBskyFeedThreadgate.isRecord(post.threadgate.record) && + AppBskyFeedThreadgate.validateRecord(post.threadgate.record).success + ? post.threadgate.record + : null, + [post], + ) + if (record) { + return ( + <View + style={[ + { + flexDirection: 'row', + alignItems: 'center', + gap: isMobile ? 8 : 10, + paddingHorizontal: isMobile ? 16 : 18, + paddingVertical: 12, + borderWidth: 1, + borderLeftWidth: isMobile ? 0 : 1, + borderRightWidth: isMobile ? 0 : 1, + }, + containerStyles, + style, + ]}> + <View + style={[ + { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + width: 32, + height: 32, + borderRadius: 19, + }, + iconStyles, + ]}> + <FontAwesomeIcon + icon={['far', 'comments']} + size={16} + color={'#fff'} + /> + </View> + <View style={{flex: 1}}> + <Text type="sm" style={[{flexWrap: 'wrap'}, textStyles]}> + {!record.allow?.length ? ( + <Trans>Replies to this thread are disabled</Trans> + ) : ( + <Trans> + Only{' '} + {record.allow.map((rule, i) => ( + <> + <Rule + key={`rule-${i}`} + rule={rule} + post={post} + lists={post.threadgate!.lists} + /> + <Separator + key={`sep-${i}`} + i={i} + length={record.allow!.length} + /> + </> + ))}{' '} + can reply. + </Trans> + )} + </Text> + </View> + </View> + ) + } + return null +} + +function Rule({ + rule, + post, + lists, +}: { + rule: any + post: AppBskyFeedDefs.PostView + lists: AppBskyGraphDefs.ListViewBasic[] | undefined +}) { + const pal = usePalette('default') + if (AppBskyFeedThreadgate.isMentionRule(rule)) { + return <Trans>mentioned users</Trans> + } + if (AppBskyFeedThreadgate.isFollowingRule(rule)) { + return ( + <Trans> + users followed by{' '} + <TextLink + href={makeProfileLink(post.author)} + text={`@${post.author.handle}`} + style={pal.link} + /> + </Trans> + ) + } + if (AppBskyFeedThreadgate.isListRule(rule)) { + const list = lists?.find(l => l.uri === rule.list) + if (list) { + const listUrip = new AtUri(list.uri) + return ( + <Trans> + <TextLink + href={makeListLink(listUrip.hostname, listUrip.rkey)} + text={list.name} + style={pal.link} + />{' '} + members + </Trans> + ) + } + } +} + +function Separator({i, length}: {i: number; length: number}) { + if (length < 2 || i === length - 1) { + return null + } + if (i === length - 2) { + return ( + <> + {length > 2 ? ',' : ''} <Trans>and</Trans>{' '} + </> + ) + } + return <>, </> +} diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx index e548c45f7..c0c5d470e 100644 --- a/src/view/com/util/post-ctrls/PostCtrls.tsx +++ b/src/view/com/util/post-ctrls/PostCtrls.tsx @@ -108,9 +108,16 @@ export function PostCtrls({ <View style={[styles.ctrls, style]}> <TouchableOpacity testID="replyBtn" - style={[styles.ctrl, !big && styles.ctrlPad, {paddingLeft: 0}]} + style={[ + styles.ctrl, + !big && styles.ctrlPad, + {paddingLeft: 0}, + post.viewer?.replyDisabled ? {opacity: 0.5} : undefined, + ]} onPress={() => { - requireAuth(() => onPressReply()) + if (!post.viewer?.replyDisabled) { + requireAuth(() => onPressReply()) + } }} accessibilityRole="button" accessibilityLabel={`Reply (${post.replyCount} ${ |