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