Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 witchsky.app
bluesky fork client
Something went wrong. Try again.
3.4 kB · 111 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112import {type StyleProp, View, type ViewStyle} from 'react-native'import {LinearGradient} from 'expo-linear-gradient'import {msg} from '@lingui/core/macro'import {useLingui} from '@lingui/react'import {Trans} from '@lingui/react/macro'
import {PressableScale} from '#/lib/custom-animations/PressableScale'import {useHaptics} from '#/lib/haptics'import {useHideBottomBarBorderForScreen} from '#/lib/hooks/useHideBottomBarBorder'import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'import {useProfileQuery} from '#/state/queries/profile'import {useSession} from '#/state/session'import {UserAvatar} from '#/view/com/util/UserAvatar'import {atoms as a, ios, native, useBreakpoints, useTheme} from '#/alf'import {transparentifyColor} from '#/alf/util/colorGeneration'import {useInteractionState} from '#/components/hooks/useInteractionState'import {Text} from '#/components/Typography'
export function ThreadComposePrompt({ onPressCompose, style,}: { onPressCompose: () => void style?: StyleProp<ViewStyle>}) { const {gtMobile} = useBreakpoints() const t = useTheme()
useHideBottomBarBorderForScreen()
return ( <View style={[ a.px_sm, gtMobile ? [a.py_xs, a.border_t, t.atoms.border_contrast_low, t.atoms.bg] : [a.pb_2xs], style, ]}> {!gtMobile && ( <LinearGradient key={t.name} // android does not update when you change the colors. sigh. start={[0.5, 0]} end={[0.5, 1]} colors={[ transparentifyColor(t.atoms.bg.backgroundColor, 0), t.atoms.bg.backgroundColor, ]} locations={[0.15, 0.4]} style={[a.absolute, a.inset_0]} /> )} <ThreadComposePromptPill onPress={onPressCompose} /> </View> )}
/** * The "Write your reply" pill. Shared by the sticky thread prompt and the * inline reader-seam prompt so the two stay visually identical. */export function ThreadComposePromptPill({onPress}: {onPress: () => void}) { const t = useTheme() const {_} = useLingui() const {gtMobile} = useBreakpoints() const {currentAccount} = useSession() const {data: profile} = useProfileQuery({did: currentAccount?.did}) const playHaptic = useHaptics() const enableSquareButtons = useEnableSquareButtons() const { state: hovered, onIn: onHoverIn, onOut: onHoverOut, } = useInteractionState()
return ( <PressableScale accessibilityRole="button" accessibilityLabel={_(msg`Compose reply`)} accessibilityHint={_(msg`Opens composer`)} onPress={() => { onPress() playHaptic('Light') }} onLongPress={ios(() => { onPress() playHaptic('Heavy') })} onHoverIn={onHoverIn} onHoverOut={onHoverOut} style={[ a.flex_row, a.align_center, a.p_sm, a.gap_sm, enableSquareButtons ? a.rounded_sm : a.rounded_full, (!gtMobile || hovered) && t.atoms.bg_contrast_25, native([a.border, t.atoms.border_contrast_low]), a.transition_color, ]}> <UserAvatar size={24} avatar={profile?.avatar} type={profile?.associated?.labeler ? 'labeler' : 'user'} /> <Text style={[a.text_md, t.atoms.text_contrast_medium]}> <Trans>Write your reply</Trans> </Text> </PressableScale> )}