+1

src/lib/constants.ts

··· 84 84 export const HITSLOP_10 = createHitslop(10) 85 85 export const HITSLOP_20 = createHitslop(20) 86 86 export const HITSLOP_30 = createHitslop(30) 87 87 + export const POST_CTRL_HITSLOP = {top: 5, bottom: 10, left: 10, right: 10} 87 88 export const BACK_HITSLOP = HITSLOP_30 88 89 export const MAX_POST_LINES = 25 89 90

+19 -19

src/view/com/post-thread/PostThreadItem.tsx

··· 25 25 import {countLines} from 'lib/strings/helpers' 26 26 import {niceDate} from 'lib/strings/time' 27 27 import {s} from 'lib/styles' 28 28 - import {isNative, isWeb} from 'platform/detection' 28 28 + import {isWeb} from 'platform/detection' 29 29 import {useSession} from 'state/session' 30 30 import {PostThreadFollowBtn} from 'view/com/post-thread/PostThreadFollowBtn' 31 31 import {atoms as a} from '#/alf' ··· 35 35 import {PostAlerts} from '../../../components/moderation/PostAlerts' 36 36 import {PostHider} from '../../../components/moderation/PostHider' 37 37 import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers' 38 38 - import {WhoCanReply} from '../threadgate/WhoCanReply' 38 38 + import {WhoCanReplyBlock, WhoCanReplyInline} from '../threadgate/WhoCanReply' 39 39 import {ErrorMessage} from '../util/error/ErrorMessage' 40 40 import {Link, TextLink} from '../util/Link' 41 41 import {formatCount} from '../util/numeric/format' ··· 340 340 </ContentHider> 341 341 <ExpandedPostDetails 342 342 post={post} 343 343 + isThreadAuthor={isThreadAuthor} 343 344 translatorUrl={translatorUrl} 344 345 needsTranslation={needsTranslation} 345 346 /> ··· 396 397 </View> 397 398 </View> 398 399 </View> 399 399 - <WhoCanReply 400 400 - post={post} 401 401 - isThreadAuthor={isThreadAuthor} 402 402 - style={{borderBottomWidth: isNative ? 1 : 0}} 403 403 - /> 404 400 </> 405 401 ) 406 402 } else { ··· 579 575 ) : undefined} 580 576 </PostHider> 581 577 </PostOuterWrapper> 582 582 - <WhoCanReply 583 583 - post={post} 584 584 - style={{ 585 585 - marginTop: 4, 586 586 - borderBottomWidth: 1, 587 587 - }} 588 588 - isThreadAuthor={isThreadAuthor} 589 589 - /> 578 578 + <WhoCanReplyBlock post={post} isThreadAuthor={isThreadAuthor} /> 590 579 </> 591 580 ) 592 581 } ··· 654 643 655 644 function ExpandedPostDetails({ 656 645 post, 646 646 + isThreadAuthor, 657 647 needsTranslation, 658 648 translatorUrl, 659 649 }: { 660 650 post: AppBskyFeedDefs.PostView 651 651 + isThreadAuthor: boolean 661 652 needsTranslation: boolean 662 653 translatorUrl: string 663 654 }) { ··· 670 661 }, [openLink, translatorUrl]) 671 662 672 663 return ( 673 673 - <View style={[s.flexRow, s.mt2, s.mb10]}> 674 674 - <Text style={pal.textLight}>{niceDate(post.indexedAt)}</Text> 664 664 + <View 665 665 + style={[ 666 666 + a.flex_row, 667 667 + a.align_center, 668 668 + a.flex_wrap, 669 669 + a.gap_sm, 670 670 + s.mt2, 671 671 + s.mb10, 672 672 + ]}> 673 673 + <Text style={[a.text_sm, pal.textLight]}>{niceDate(post.indexedAt)}</Text> 674 674 + <WhoCanReplyInline post={post} isThreadAuthor={isThreadAuthor} /> 675 675 {needsTranslation && ( 676 676 <> 677 677 - <Text style={pal.textLight}> &middot; </Text> 677 677 + <Text style={[a.text_sm, pal.textLight]}>&middot;</Text> 678 678 679 679 <Text 680 680 - style={pal.link} 680 680 + style={[a.text_sm, pal.link]} 681 681 title={_(msg`Translate`)} 682 682 onPress={onTranslatePress}> 683 683 <Trans>Translate</Trans>

+269 -142

src/view/com/threadgate/WhoCanReply.tsx

··· 11 11 import {useLingui} from '@lingui/react' 12 12 import {useQueryClient} from '@tanstack/react-query' 13 13 14 14 - import {useAnalytics} from '#/lib/analytics/analytics' 15 14 import {createThreadgate} from '#/lib/api' 16 15 import {until} from '#/lib/async/until' 17 17 - import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' 18 18 - import {usePalette} from '#/lib/hooks/usePalette' 16 16 + import {HITSLOP_10} from '#/lib/constants' 19 17 import {makeListLink, makeProfileLink} from '#/lib/routes/links' 20 20 - import {colors} from '#/lib/styles' 21 18 import {logger} from '#/logger' 22 19 import {isNative} from '#/platform/detection' 23 20 import {useModalControls} from '#/state/modals' ··· 28 25 } from '#/state/queries/threadgate' 29 26 import {useAgent} from '#/state/session' 30 27 import * as Toast from 'view/com/util/Toast' 28 28 + import {atoms as a, useTheme} from '#/alf' 31 29 import {Button} from '#/components/Button' 30 30 + import * as Dialog from '#/components/Dialog' 31 31 + import {useDialogControl} from '#/components/Dialog' 32 32 + import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign' 33 33 + import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe' 34 34 + import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group' 35 35 + import {Text} from '#/components/Typography' 32 36 import {TextLink} from '../util/Link' 33 33 - import {Text} from '../util/text/Text' 34 37 35 35 - export function WhoCanReply({ 36 36 - post, 37 37 - isThreadAuthor, 38 38 - style, 39 39 - }: { 38 38 + interface WhoCanReplyProps { 40 39 post: AppBskyFeedDefs.PostView 41 40 isThreadAuthor: boolean 42 41 style?: StyleProp<ViewStyle> 43 43 - }) { 44 44 - const {track} = useAnalytics() 42 42 + } 43 43 + 44 44 + export function WhoCanReplyInline({ 45 45 + post, 46 46 + isThreadAuthor, 47 47 + style, 48 48 + }: WhoCanReplyProps) { 45 49 const {_} = useLingui() 46 46 - const pal = usePalette('default') 47 47 - const agent = useAgent() 48 48 - const queryClient = useQueryClient() 49 49 - const {openModal} = useModalControls() 50 50 - const containerStyles = useColorSchemeStyle( 51 51 - { 52 52 - backgroundColor: pal.colors.unreadNotifBg, 53 53 - }, 54 54 - { 55 55 - backgroundColor: pal.colors.unreadNotifBg, 56 56 - }, 57 57 - ) 58 58 - const textStyles = useColorSchemeStyle( 59 59 - {color: colors.blue5}, 60 60 - {color: colors.blue1}, 61 61 - ) 62 62 - const hoverStyles = useColorSchemeStyle( 63 63 - { 64 64 - backgroundColor: colors.white, 65 65 - }, 66 66 - { 67 67 - backgroundColor: pal.colors.background, 68 68 - }, 69 69 - ) 70 70 - const settings = React.useMemo( 71 71 - () => threadgateViewToSettings(post.threadgate), 72 72 - [post], 73 73 - ) 74 74 - const isRootPost = !('reply' in post.record) 50 50 + const t = useTheme() 51 51 + const infoDialogControl = useDialogControl() 52 52 + const {settings, isRootPost, onPressEdit} = useWhoCanReply(post) 75 53 76 76 - const onPressEdit = () => { 77 77 - track('Post:EditThreadgateOpened') 78 78 - if (isNative && Keyboard.isVisible()) { 79 79 - Keyboard.dismiss() 80 80 - } 81 81 - openModal({ 82 82 - name: 'threadgate', 83 83 - settings, 84 84 - async onConfirm(newSettings: ThreadgateSetting[]) { 85 85 - try { 86 86 - if (newSettings.length) { 87 87 - await createThreadgate(agent, post.uri, newSettings) 88 88 - } else { 89 89 - await agent.api.com.atproto.repo.deleteRecord({ 90 90 - repo: agent.session!.did, 91 91 - collection: 'app.bsky.feed.threadgate', 92 92 - rkey: new AtUri(post.uri).rkey, 93 93 - }) 94 94 - } 95 95 - await whenAppViewReady(agent, post.uri, res => { 96 96 - const thread = res.data.thread 97 97 - if (AppBskyFeedDefs.isThreadViewPost(thread)) { 98 98 - const fetchedSettings = threadgateViewToSettings( 99 99 - thread.post.threadgate, 100 100 - ) 101 101 - return ( 102 102 - JSON.stringify(fetchedSettings) === JSON.stringify(newSettings) 103 103 - ) 104 104 - } 105 105 - return false 106 106 - }) 107 107 - Toast.show('Thread settings updated') 108 108 - queryClient.invalidateQueries({ 109 109 - queryKey: [POST_THREAD_RQKEY_ROOT], 110 110 - }) 111 111 - track('Post:ThreadgateEdited') 112 112 - } catch (err) { 113 113 - Toast.show( 114 114 - 'There was an issue. Please check your internet connection and try again.', 115 115 - ) 116 116 - logger.error('Failed to edit threadgate', {message: err}) 117 117 - } 118 118 - }, 119 119 - }) 54 54 + if (!isRootPost) { 55 55 + return null 56 56 + } 57 57 + if (!settings.length && !isThreadAuthor) { 58 58 + return null 120 59 } 121 60 61 61 + const isEverybody = settings.length === 0 62 62 + const isNobody = !!settings.find(gate => gate.type === 'nobody') 63 63 + const description = isEverybody 64 64 + ? _(msg`Everybody can reply`) 65 65 + : isNobody 66 66 + ? _(msg`Replies disabled`) 67 67 + : _(msg`Some people can reply`) 68 68 + 69 69 + return ( 70 70 + <> 71 71 + <Button 72 72 + label={ 73 73 + isThreadAuthor ? _(msg`Edit who can reply`) : _(msg`Who can reply`) 74 74 + } 75 75 + onPress={isThreadAuthor ? onPressEdit : infoDialogControl.open} 76 76 + hitSlop={HITSLOP_10}> 77 77 + {({hovered}) => ( 78 78 + <View style={[a.flex_row, a.align_center, a.gap_xs, style]}> 79 79 + <Icon 80 80 + color={t.palette.contrast_400} 81 81 + width={16} 82 82 + settings={settings} 83 83 + /> 84 84 + <Text 85 85 + style={[ 86 86 + a.text_sm, 87 87 + a.leading_tight, 88 88 + t.atoms.text_contrast_medium, 89 89 + hovered && a.underline, 90 90 + ]}> 91 91 + {description} 92 92 + </Text> 93 93 + </View> 94 94 + )} 95 95 + </Button> 96 96 + <InfoDialog control={infoDialogControl} post={post} settings={settings} /> 97 97 + </> 98 98 + ) 99 99 + } 100 100 + 101 101 + export function WhoCanReplyBlock({ 102 102 + post, 103 103 + isThreadAuthor, 104 104 + style, 105 105 + }: WhoCanReplyProps) { 106 106 + const {_} = useLingui() 107 107 + const t = useTheme() 108 108 + const infoDialogControl = useDialogControl() 109 109 + const {settings, isRootPost, onPressEdit} = useWhoCanReply(post) 110 110 + 122 111 if (!isRootPost) { 123 112 return null 124 113 } ··· 126 115 return null 127 116 } 128 117 118 118 + const isEverybody = settings.length === 0 119 119 + const isNobody = !!settings.find(gate => gate.type === 'nobody') 120 120 + const description = isEverybody 121 121 + ? _(msg`Everybody can reply`) 122 122 + : isNobody 123 123 + ? _(msg`Replies on this thread are disabled`) 124 124 + : _(msg`Some people can reply`) 125 125 + 129 126 return ( 130 130 - <View 127 127 + <> 128 128 + <Button 129 129 + label={ 130 130 + isThreadAuthor ? _(msg`Edit who can reply`) : _(msg`Who can reply`) 131 131 + } 132 132 + onPress={isThreadAuthor ? onPressEdit : infoDialogControl.open} 133 133 + hitSlop={HITSLOP_10}> 134 134 + {({hovered}) => ( 135 135 + <View 136 136 + style={[ 137 137 + a.flex_1, 138 138 + a.flex_row, 139 139 + a.align_center, 140 140 + a.py_sm, 141 141 + a.pr_lg, 142 142 + style, 143 143 + ]}> 144 144 + <View style={[{paddingLeft: 25, paddingRight: 18}]}> 145 145 + <Icon color={t.palette.contrast_300} settings={settings} /> 146 146 + </View> 147 147 + <Text 148 148 + style={[ 149 149 + a.text_sm, 150 150 + a.leading_tight, 151 151 + t.atoms.text_contrast_medium, 152 152 + hovered && a.underline, 153 153 + ]}> 154 154 + {description} 155 155 + </Text> 156 156 + </View> 157 157 + )} 158 158 + </Button> 159 159 + <InfoDialog control={infoDialogControl} post={post} settings={settings} /> 160 160 + </> 161 161 + ) 162 162 + } 163 163 + 164 164 + function Icon({ 165 165 + color, 166 166 + width, 167 167 + settings, 168 168 + }: { 169 169 + color: string 170 170 + width?: number 171 171 + settings: ThreadgateSetting[] 172 172 + }) { 173 173 + const isEverybody = settings.length === 0 174 174 + const isNobody = !!settings.find(gate => gate.type === 'nobody') 175 175 + const IconComponent = isEverybody ? Earth : isNobody ? CircleBanSign : Group 176 176 + return <IconComponent fill={color} width={width} /> 177 177 + } 178 178 + 179 179 + function InfoDialog({ 180 180 + control, 181 181 + post, 182 182 + settings, 183 183 + }: { 184 184 + control: Dialog.DialogControlProps 185 185 + post: AppBskyFeedDefs.PostView 186 186 + settings: ThreadgateSetting[] 187 187 + }) { 188 188 + return ( 189 189 + <Dialog.Outer control={control}> 190 190 + <Dialog.Handle /> 191 191 + <InfoDialogInner post={post} settings={settings} /> 192 192 + </Dialog.Outer> 193 193 + ) 194 194 + } 195 195 + 196 196 + function InfoDialogInner({ 197 197 + post, 198 198 + settings, 199 199 + }: { 200 200 + post: AppBskyFeedDefs.PostView 201 201 + settings: ThreadgateSetting[] 202 202 + }) { 203 203 + const {_} = useLingui() 204 204 + return ( 205 205 + <Dialog.ScrollableInner 206 206 + label={_(msg`Who can reply dialog`)} 207 207 + style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}> 208 208 + <View style={[a.gap_sm]}> 209 209 + <Text style={[a.font_bold, a.text_xl]}> 210 210 + <Trans>Who can reply?</Trans> 211 211 + </Text> 212 212 + <Rules post={post} settings={settings} /> 213 213 + </View> 214 214 + </Dialog.ScrollableInner> 215 215 + ) 216 216 + } 217 217 + 218 218 + function Rules({ 219 219 + post, 220 220 + settings, 221 221 + }: { 222 222 + post: AppBskyFeedDefs.PostView 223 223 + settings: ThreadgateSetting[] 224 224 + }) { 225 225 + const t = useTheme() 226 226 + return ( 227 227 + <Text 131 228 style={[ 132 132 - { 133 133 - flexDirection: 'row', 134 134 - alignItems: 'center', 135 135 - gap: 10, 136 136 - paddingLeft: 18, 137 137 - paddingRight: 14, 138 138 - paddingVertical: 10, 139 139 - borderTopWidth: 1, 140 140 - }, 141 141 - pal.border, 142 142 - containerStyles, 143 143 - style, 229 229 + a.text_md, 230 230 + a.leading_tight, 231 231 + a.flex_wrap, 232 232 + t.atoms.text_contrast_medium, 144 233 ]}> 145 145 - <View style={{flex: 1, paddingVertical: 6}}> 146 146 - <Text type="sm" style={[{flexWrap: 'wrap'}, textStyles]}> 147 147 - {!settings.length ? ( 148 148 - <Trans>Everybody can reply.</Trans> 149 149 - ) : settings[0].type === 'nobody' ? ( 150 150 - <Trans>Replies to this thread are disabled.</Trans> 151 151 - ) : ( 152 152 - <Trans> 153 153 - Only{' '} 154 154 - {settings.map((rule, i) => ( 155 155 - <React.Fragment key={`rule-${i}`}> 156 156 - <Rule 157 157 - rule={rule} 158 158 - post={post} 159 159 - lists={post.threadgate!.lists} 160 160 - /> 161 161 - <Separator key={`sep-${i}`} i={i} length={settings.length} /> 162 162 - </React.Fragment> 163 163 - ))}{' '} 164 164 - can reply. 165 165 - </Trans> 166 166 - )} 167 167 - </Text> 168 168 - </View> 169 169 - {isThreadAuthor && ( 170 170 - <View> 171 171 - <Button label={_(msg`Edit`)} onPress={onPressEdit}> 172 172 - {({hovered}) => ( 173 173 - <View 174 174 - style={[ 175 175 - hovered && hoverStyles, 176 176 - {paddingVertical: 6, paddingHorizontal: 8, borderRadius: 8}, 177 177 - ]}> 178 178 - <Text type="sm" style={pal.link}> 179 179 - <Trans>Edit</Trans> 180 180 - </Text> 181 181 - </View> 182 182 - )} 183 183 - </Button> 184 184 - </View> 234 234 + {!settings.length ? ( 235 235 + <Trans>Everybody can reply</Trans> 236 236 + ) : settings[0].type === 'nobody' ? ( 237 237 + <Trans>Replies to this thread are disabled</Trans> 238 238 + ) : ( 239 239 + <Trans> 240 240 + Only{' '} 241 241 + {settings.map((rule, i) => ( 242 242 + <> 243 243 + <Rule 244 244 + key={`rule-${i}`} 245 245 + rule={rule} 246 246 + post={post} 247 247 + lists={post.threadgate!.lists} 248 248 + /> 249 249 + <Separator key={`sep-${i}`} i={i} length={settings.length} /> 250 250 + </> 251 251 + ))}{' '} 252 252 + can reply 253 253 + </Trans> 185 254 )} 186 186 - </View> 255 255 + </Text> 187 256 ) 188 257 } 189 258 ··· 196 265 post: AppBskyFeedDefs.PostView 197 266 lists: AppBskyGraphDefs.ListViewBasic[] | undefined 198 267 }) { 199 199 - const pal = usePalette('default') 268 268 + const t = useTheme() 200 269 if (rule.type === 'mention') { 201 270 return <Trans>mentioned users</Trans> 202 271 } ··· 208 277 type="sm" 209 278 href={makeProfileLink(post.author)} 210 279 text={`@${post.author.handle}`} 211 211 - style={pal.link} 280 280 + style={{color: t.palette.primary_500}} 212 281 /> 213 282 </Trans> 214 283 ) ··· 223 292 type="sm" 224 293 href={makeListLink(listUrip.hostname, listUrip.rkey)} 225 294 text={list.name} 226 226 - style={pal.link} 295 295 + style={{color: t.palette.primary_500}} 227 296 />{' '} 228 297 members 229 298 </Trans> ··· 244 313 ) 245 314 } 246 315 return <>, </> 316 316 + } 317 317 + 318 318 + function useWhoCanReply(post: AppBskyFeedDefs.PostView) { 319 319 + const agent = useAgent() 320 320 + const queryClient = useQueryClient() 321 321 + const {openModal} = useModalControls() 322 322 + 323 323 + const settings = React.useMemo( 324 324 + () => threadgateViewToSettings(post.threadgate), 325 325 + [post], 326 326 + ) 327 327 + const isRootPost = !('reply' in post.record) 328 328 + 329 329 + const onPressEdit = () => { 330 330 + if (isNative && Keyboard.isVisible()) { 331 331 + Keyboard.dismiss() 332 332 + } 333 333 + openModal({ 334 334 + name: 'threadgate', 335 335 + settings, 336 336 + async onConfirm(newSettings: ThreadgateSetting[]) { 337 337 + try { 338 338 + if (newSettings.length) { 339 339 + await createThreadgate(agent, post.uri, newSettings) 340 340 + } else { 341 341 + await agent.api.com.atproto.repo.deleteRecord({ 342 342 + repo: agent.session!.did, 343 343 + collection: 'app.bsky.feed.threadgate', 344 344 + rkey: new AtUri(post.uri).rkey, 345 345 + }) 346 346 + } 347 347 + await whenAppViewReady(agent, post.uri, res => { 348 348 + const thread = res.data.thread 349 349 + if (AppBskyFeedDefs.isThreadViewPost(thread)) { 350 350 + const fetchedSettings = threadgateViewToSettings( 351 351 + thread.post.threadgate, 352 352 + ) 353 353 + return ( 354 354 + JSON.stringify(fetchedSettings) === JSON.stringify(newSettings) 355 355 + ) 356 356 + } 357 357 + return false 358 358 + }) 359 359 + Toast.show('Thread settings updated') 360 360 + queryClient.invalidateQueries({ 361 361 + queryKey: [POST_THREAD_RQKEY_ROOT], 362 362 + }) 363 363 + } catch (err) { 364 364 + Toast.show( 365 365 + 'There was an issue. Please check your internet connection and try again.', 366 366 + ) 367 367 + logger.error('Failed to edit threadgate', {message: err}) 368 368 + } 369 369 + }, 370 370 + }) 371 371 + } 372 372 + 373 373 + return {settings, isRootPost, onPressEdit} 247 374 } 248 375 249 376 async function whenAppViewReady(

+5 -5

src/view/com/util/post-ctrls/PostCtrls.tsx

··· 15 15 import {msg, plural} from '@lingui/macro' 16 16 import {useLingui} from '@lingui/react' 17 17 18 18 - import {HITSLOP_10, HITSLOP_20} from '#/lib/constants' 18 18 + import {POST_CTRL_HITSLOP} from '#/lib/constants' 19 19 import {useHaptics} from '#/lib/haptics' 20 20 import {makeProfileLink} from '#/lib/routes/links' 21 21 import {shareUrl} from '#/lib/sharing' ··· 215 215 other: 'Reply (# replies)', 216 216 })} 217 217 accessibilityHint="" 218 218 - hitSlop={big ? HITSLOP_20 : HITSLOP_10}> 218 218 + hitSlop={POST_CTRL_HITSLOP}> 219 219 <Bubble 220 220 style={[defaultCtrlColor, {pointerEvents: 'none'}]} 221 221 width={big ? 22 : 18} ··· 258 258 }) 259 259 } 260 260 accessibilityHint="" 261 261 - hitSlop={big ? HITSLOP_20 : HITSLOP_10}> 261 261 + hitSlop={POST_CTRL_HITSLOP}> 262 262 {post.viewer?.like ? ( 263 263 <HeartIconFilled style={s.likeColor} width={big ? 22 : 18} /> 264 264 ) : ( ··· 299 299 }} 300 300 accessibilityLabel={_(msg`Share`)} 301 301 accessibilityHint="" 302 302 - hitSlop={big ? HITSLOP_20 : HITSLOP_10}> 302 302 + hitSlop={POST_CTRL_HITSLOP}> 303 303 <ArrowOutOfBox 304 304 style={[defaultCtrlColor, {pointerEvents: 'none'}]} 305 305 width={22} ··· 325 325 record={record} 326 326 richText={richText} 327 327 style={{padding: 5}} 328 328 - hitSlop={big ? HITSLOP_20 : HITSLOP_10} 328 328 + hitSlop={POST_CTRL_HITSLOP} 329 329 timestamp={post.indexedAt} 330 330 /> 331 331 </View>

+2 -2

src/view/com/util/post-ctrls/RepostButton.tsx

··· 3 3 import {msg, plural} from '@lingui/macro' 4 4 import {useLingui} from '@lingui/react' 5 5 6 6 - import {HITSLOP_10, HITSLOP_20} from '#/lib/constants' 6 6 + import {POST_CTRL_HITSLOP} from '#/lib/constants' 7 7 import {useHaptics} from '#/lib/haptics' 8 8 import {useRequireAuth} from '#/state/session' 9 9 import {atoms as a, useTheme} from '#/alf' ··· 67 67 shape="round" 68 68 variant="ghost" 69 69 color="secondary" 70 70 - hitSlop={big ? HITSLOP_20 : HITSLOP_10}> 70 70 + hitSlop={POST_CTRL_HITSLOP}> 71 71 <Repost style={color} width={big ? 22 : 18} /> 72 72 {typeof repostCount !== 'undefined' && repostCount > 0 ? ( 73 73 <Text