jollywhoppers.com
Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
xan.lol
1import {type StyleProp, View, type ViewStyle} from 'react-native'
2import {LinearGradient} from 'expo-linear-gradient'
3import {msg} from '@lingui/core/macro'
4import {useLingui} from '@lingui/react'
5import {Trans} from '@lingui/react/macro'
6
7import {PressableScale} from '#/lib/custom-animations/PressableScale'
8import {useHaptics} from '#/lib/haptics'
9import {useHideBottomBarBorderForScreen} from '#/lib/hooks/useHideBottomBarBorder'
10import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
11import {useProfileQuery} from '#/state/queries/profile'
12import {useSession} from '#/state/session'
13import {UserAvatar} from '#/view/com/util/UserAvatar'
14import {atoms as a, ios, native, useBreakpoints, useTheme} from '#/alf'
15import {transparentifyColor} from '#/alf/util/colorGeneration'
16import {useInteractionState} from '#/components/hooks/useInteractionState'
17import {Text} from '#/components/Typography'
18
19export function ThreadComposePrompt({
20 onPressCompose,
21 style,
22}: {
23 onPressCompose: () => void
24 style?: StyleProp<ViewStyle>
25}) {
26 const {currentAccount} = useSession()
27 const {data: profile} = useProfileQuery({did: currentAccount?.did})
28 const {_} = useLingui()
29 const {gtMobile} = useBreakpoints()
30 const t = useTheme()
31 const playHaptic = useHaptics()
32 const enableSquareButtons = useEnableSquareButtons()
33 const {
34 state: hovered,
35 onIn: onHoverIn,
36 onOut: onHoverOut,
37 } = useInteractionState()
38
39 useHideBottomBarBorderForScreen()
40
41 return (
42 <View
43 style={[
44 a.px_sm,
45 gtMobile
46 ? [a.py_xs, a.border_t, t.atoms.border_contrast_low, t.atoms.bg]
47 : [a.pb_2xs],
48 style,
49 ]}>
50 {!gtMobile && (
51 <LinearGradient
52 key={t.name} // android does not update when you change the colors. sigh.
53 start={[0.5, 0]}
54 end={[0.5, 1]}
55 colors={[
56 transparentifyColor(t.atoms.bg.backgroundColor, 0),
57 t.atoms.bg.backgroundColor,
58 ]}
59 locations={[0.15, 0.4]}
60 style={[a.absolute, a.inset_0]}
61 />
62 )}
63 <PressableScale
64 accessibilityRole="button"
65 accessibilityLabel={_(msg`Compose reply`)}
66 accessibilityHint={_(msg`Opens composer`)}
67 onPress={() => {
68 onPressCompose()
69 playHaptic('Light')
70 }}
71 onLongPress={ios(() => {
72 onPressCompose()
73 playHaptic('Heavy')
74 })}
75 onHoverIn={onHoverIn}
76 onHoverOut={onHoverOut}
77 style={[
78 a.flex_row,
79 a.align_center,
80 a.p_sm,
81 a.gap_sm,
82 enableSquareButtons ? a.rounded_sm : a.rounded_full,
83 (!gtMobile || hovered) && t.atoms.bg_contrast_25,
84 native([a.border, t.atoms.border_contrast_low]),
85 a.transition_color,
86 ]}>
87 <UserAvatar
88 size={24}
89 avatar={profile?.avatar}
90 type={profile?.associated?.labeler ? 'labeler' : 'user'}
91 />
92 <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
93 <Trans>Write your reply</Trans>
94 </Text>
95 </PressableScale>
96 </View>
97 )
98}