bas.sh
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
1import {useEffect, useState} from 'react'
2import {View} from 'react-native'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5import {useNavigation} from '@react-navigation/core'
6
7import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
8import {useKawaiiMode} from '#/state/preferences/kawaii'
9import {useSession} from '#/state/session'
10import {DesktopFeeds} from '#/view/shell/desktop/Feeds'
11import {DesktopSearch} from '#/view/shell/desktop/Search'
12import {SidebarTrendingTopics} from '#/view/shell/desktop/SidebarTrendingTopics'
13import {
14 atoms as a,
15 useGutters,
16 useLayoutBreakpoints,
17 useTheme,
18 web,
19} from '#/alf'
20import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
21import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
22import {InlineLinkText} from '#/components/Link'
23import {ProgressGuideList} from '#/components/ProgressGuide/List'
24import {Text} from '#/components/Typography'
25import {SidebarLiveEventFeedsBanner} from '#/features/liveEvents/components/SidebarLiveEventFeedsBanner'
26
27function useWebQueryParams() {
28 const navigation = useNavigation()
29 const [params, setParams] = useState<Record<string, string>>({})
30
31 useEffect(() => {
32 return navigation.addListener('state', e => {
33 try {
34 const {state} = e.data
35 const lastRoute = state.routes[state.routes.length - 1]
36 setParams(lastRoute.params)
37 } catch (err) {}
38 })
39 }, [navigation, setParams])
40
41 return params
42}
43
44export function DesktopRightNav({routeName}: {routeName: string}) {
45 const t = useTheme()
46 const {_} = useLingui()
47 const {hasSession, currentAccount} = useSession()
48 const kawaii = useKawaiiMode()
49 const gutters = useGutters(['base', 0, 'base', 'wide'])
50 const isSearchScreen = routeName === 'Search'
51 const webqueryParams = useWebQueryParams()
52 const searchQuery = webqueryParams?.q
53 const showExploreScreenDuplicatedContent =
54 !isSearchScreen || (isSearchScreen && !!searchQuery)
55 const {rightNavVisible, centerColumnOffset, leftNavMinimal} =
56 useLayoutBreakpoints()
57
58 if (!rightNavVisible) {
59 return null
60 }
61
62 const width = centerColumnOffset ? 250 : 300
63
64 return (
65 <View
66 style={[
67 gutters,
68 a.gap_lg,
69 a.pr_2xs,
70 web({
71 position: 'fixed',
72 left: '50%',
73 transform: [
74 {
75 translateX: 300 + (centerColumnOffset ? CENTER_COLUMN_OFFSET : 0),
76 },
77 ...a.scrollbar_offset.transform,
78 ],
79 /**
80 * Compensate for the right padding above (2px) to retain intended width.
81 */
82 width: width + gutters.paddingLeft + 2,
83 maxHeight: '100vh',
84 }),
85 ]}>
86 {!isSearchScreen && <DesktopSearch />}
87
88 {hasSession && (
89 <>
90 <DesktopFeeds />
91 <ProgressGuideList />
92 </>
93 )}
94
95 {showExploreScreenDuplicatedContent && <SidebarLiveEventFeedsBanner />}
96 {showExploreScreenDuplicatedContent && <SidebarTrendingTopics />}
97
98 <Text style={[a.leading_snug, t.atoms.text_contrast_low]}>
99 {hasSession && (
100 <>
101 <InlineLinkText
102 to={FEEDBACK_FORM_URL({
103 email: currentAccount?.email,
104 handle: currentAccount?.handle,
105 })}
106 style={[t.atoms.text_contrast_medium]}
107 label={_(msg`Feedback`)}>
108 {_(msg`Feedback`)}
109 </InlineLinkText>
110 <Text style={[t.atoms.text_contrast_low]}>{' ∙ '}</Text>
111 </>
112 )}
113 <InlineLinkText
114 to="https://witchsky.app/about/privacy"
115 style={[t.atoms.text_contrast_medium]}
116 label={_(msg`Privacy`)}>
117 {_(msg`Privacy`)}
118 </InlineLinkText>
119 <Text style={[t.atoms.text_contrast_low]}>{' ∙ '}</Text>
120 <InlineLinkText
121 to="https://witchsky.app/about/tos"
122 style={[t.atoms.text_contrast_medium]}
123 label={_(msg`Terms`)}>
124 {_(msg`Terms`)}
125 </InlineLinkText>
126 <Text style={[t.atoms.text_contrast_low]}>{' ∙ '}</Text>
127 <InlineLinkText
128 label={_(msg`Code`)}
129 to={HELP_DESK_URL}
130 style={[t.atoms.text_contrast_medium]}>
131 {_(msg`Code`)}
132 </InlineLinkText>
133 </Text>
134
135 {kawaii && (
136 <Text style={[t.atoms.text_contrast_medium, {marginTop: 12}]}>
137 <Trans>
138 Kawaii logo by{' '}
139 <InlineLinkText
140 label={_(msg`Logo by ovvie`)}
141 to="https://ovvie.neocities.org/">
142 ovvie
143 </InlineLinkText>
144 </Trans>
145 </Text>
146 )}
147
148 {!hasSession && leftNavMinimal && (
149 <View style={[a.w_full, {height: 32}]}>
150 <AppLanguageDropdown />
151 </View>
152 )}
153 </View>
154 )
155}