Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
1import {useMemo} from 'react'
2import {StyleSheet, View} from 'react-native'
3import Svg, {Circle, Line} from 'react-native-svg'
4import {AtUri} from '@atproto/api'
5import {msg} from '@lingui/core/macro'
6import {useLingui} from '@lingui/react'
7
8import {usePalette} from '#/lib/hooks/usePalette'
9import {makeProfileLink} from '#/lib/routes/links'
10import {useInteractionState} from '#/components/hooks/useInteractionState'
11import {SubtleHover} from '#/components/SubtleHover'
12import {Link} from '../util/Link'
13import {Text} from '../util/text/Text'
14
15export function ViewFullThread({uri}: {uri: string}) {
16 const {
17 state: hover,
18 onIn: onHoverIn,
19 onOut: onHoverOut,
20 } = useInteractionState()
21 const pal = usePalette('default')
22 const itemHref = useMemo(() => {
23 const urip = new AtUri(uri)
24 return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey)
25 }, [uri])
26 const {_} = useLingui()
27
28 return (
29 <Link
30 style={[styles.viewFullThread]}
31 href={itemHref}
32 asAnchor
33 noFeedback
34 onPointerEnter={onHoverIn}
35 onPointerLeave={onHoverOut}>
36 <SubtleHover
37 hover={hover}
38 // adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
39 style={{top: 8, bottom: -5}}
40 />
41 <View style={styles.viewFullThreadDots}>
42 <Svg width="4" height="40">
43 <Line
44 x1="2"
45 y1="0"
46 x2="2"
47 y2="15"
48 stroke={pal.colors.replyLine}
49 strokeWidth="2"
50 />
51 <Circle cx="2" cy="22" r="1.5" fill={pal.colors.replyLineDot} />
52 <Circle cx="2" cy="28" r="1.5" fill={pal.colors.replyLineDot} />
53 <Circle cx="2" cy="34" r="1.5" fill={pal.colors.replyLineDot} />
54 </Svg>
55 </View>
56
57 <Text type="md" style={[pal.link, {paddingTop: 18, paddingBottom: 4}]}>
58 {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
59 {_(msg`View full thread`)}
60 </Text>
61 </Link>
62 )
63}
64
65const styles = StyleSheet.create({
66 viewFullThread: {
67 flexDirection: 'row',
68 gap: 10,
69 paddingLeft: 18,
70 },
71 viewFullThreadDots: {
72 width: 42,
73 alignItems: 'center',
74 },
75})