forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {View} from 'react-native'
2import Animated from 'react-native-reanimated'
3import {useSafeAreaInsets} from 'react-native-safe-area-context'
4import {msg} from '@lingui/core/macro'
5import {useLingui} from '@lingui/react'
6import {useNavigation} from '@react-navigation/native'
7
8import {HITSLOP_10} from '#/lib/constants'
9import {PressableScale} from '#/lib/custom-animations/PressableScale'
10import {useHaptics} from '#/lib/haptics'
11import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform'
12import {type NavigationProp} from '#/lib/routes/types'
13import {emitSoftReset} from '#/state/events'
14import {useSession} from '#/state/session'
15import {useShellLayout} from '#/state/shell/shell-layout'
16import {Logo} from '#/view/icons/Logo'
17import {atoms as a, useTheme} from '#/alf'
18import {ButtonIcon} from '#/components/Button'
19import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
20import * as Layout from '#/components/Layout'
21import {Link} from '#/components/Link'
22import {IS_DEV, IS_LIQUID_GLASS} from '#/env'
23
24export function HomeHeaderLayoutMobile({
25 children,
26}: {
27 children: React.ReactNode
28 tabBarAnchor: React.ReactElement | null | undefined
29}) {
30 const t = useTheme()
31 const {_} = useLingui()
32 const {headerHeight} = useShellLayout()
33 const insets = useSafeAreaInsets()
34 const headerMinimalShellTransform = useMinimalShellHeaderTransform()
35 const {hasSession} = useSession()
36 const playHaptic = useHaptics()
37 const {navigate} = useNavigation<NavigationProp>()
38
39 return (
40 <Animated.View
41 style={[
42 a.fixed,
43 a.z_10,
44 t.atoms.bg,
45 {
46 top: 0,
47 left: 0,
48 right: 0,
49 },
50 IS_LIQUID_GLASS && {paddingTop: insets.top},
51 headerMinimalShellTransform,
52 ]}
53 onLayout={e => {
54 headerHeight.set(e.nativeEvent.layout.height)
55 }}>
56 <Layout.Header.Outer noBottomBorder>
57 <Layout.Header.Slot>
58 <Layout.Header.MenuButton />
59 </Layout.Header.Slot>
60
61 <View style={[a.flex_1, a.align_center]}>
62 <PressableScale
63 targetScale={0.9}
64 onPress={() => {
65 if (IS_DEV) {
66 navigate('Debug')
67 } else {
68 playHaptic('Light')
69 emitSoftReset()
70 }
71 }}>
72 <Logo width={30} />
73 </PressableScale>
74 </View>
75
76 <Layout.Header.Slot>
77 {hasSession && (
78 <Link
79 testID="viewHeaderHomeFeedPrefsBtn"
80 to={{screen: 'Feeds'}}
81 hitSlop={HITSLOP_10}
82 label={_(msg`View your feeds and explore more`)}
83 size="small"
84 variant="ghost"
85 color="secondary"
86 shape="square"
87 style={[
88 a.justify_center,
89 {marginRight: -Layout.BUTTON_VISUAL_ALIGNMENT_OFFSET},
90 a.bg_transparent,
91 ]}>
92 <ButtonIcon icon={FeedsIcon} size="lg" />
93 </Link>
94 )}
95 </Layout.Header.Slot>
96 </Layout.Header.Outer>
97 {children}
98 </Animated.View>
99 )
100}