diff options
Diffstat (limited to 'src/view/shell/desktop/RightNav.tsx')
| -rw-r--r-- | src/view/shell/desktop/RightNav.tsx | 197 |
1 files changed, 77 insertions, 120 deletions
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index 7814f3548..895d16021 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -1,26 +1,24 @@ -import {StyleSheet, View} from 'react-native' +import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants' -import {usePalette} from '#/lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {s} from '#/lib/styles' import {useKawaiiMode} from '#/state/preferences/kawaii' import {useSession} from '#/state/session' -import {TextLink} from '#/view/com/util/Link' -import {Text} from '#/view/com/util/text/Text' -import {atoms as a} from '#/alf' +import {DesktopFeeds} from '#/view/shell/desktop/Feeds' +import {DesktopSearch} from '#/view/shell/desktop/Search' +import {atoms as a, useGutters, useTheme, web} from '#/alf' +import {InlineLinkText} from '#/components/Link' import {ProgressGuideList} from '#/components/ProgressGuide/List' -import {DesktopFeeds} from './Feeds' -import {DesktopSearch} from './Search' +import {Text} from '#/components/Typography' export function DesktopRightNav({routeName}: {routeName: string}) { - const pal = usePalette('default') + const t = useTheme() const {_} = useLingui() const {hasSession, currentAccount} = useSession() - const kawaii = useKawaiiMode() + const gutters = useGutters(['base', 0, 'base', 'wide']) const {isTablet} = useWebMediaQueries() if (isTablet) { @@ -28,122 +26,81 @@ export function DesktopRightNav({routeName}: {routeName: string}) { } return ( - <View style={[a.px_xl, styles.rightNav]}> - <View style={{paddingVertical: 20}}> - {routeName === 'Search' ? ( - <View style={{marginBottom: 18}}> + <View + style={[ + gutters, + web({ + position: 'fixed', + left: '50%', + transform: [ + { + translateX: 300, + }, + ...a.scrollbar_offset.transform, + ], + width: 300 + gutters.paddingLeft, + maxHeight: '100%', + overflowY: 'auto', + }), + ]}> + {routeName !== 'Search' && ( + <View style={[a.pb_lg]}> + <DesktopSearch /> + </View> + )} + {hasSession && ( + <> + <ProgressGuideList style={[a.pb_xl]} /> + <View + style={[a.pb_lg, a.mb_lg, a.border_b, t.atoms.border_contrast_low]}> <DesktopFeeds /> </View> - ) : ( - <> - <DesktopSearch /> + </> + )} - {hasSession && ( - <> - <ProgressGuideList style={[{marginTop: 22, marginBottom: 8}]} /> - <View style={[pal.border, styles.desktopFeedsContainer]}> - <DesktopFeeds /> - </View> - </> - )} + <Text style={[a.leading_snug, t.atoms.text_contrast_low]}> + {hasSession && ( + <> + <InlineLinkText + to={FEEDBACK_FORM_URL({ + email: currentAccount?.email, + handle: currentAccount?.handle, + })} + label={_(msg`Feedback`)}> + {_(msg`Feedback`)} + </InlineLinkText> + {' • '} </> )} + <InlineLinkText + to="https://bsky.social/about/support/privacy-policy" + label={_(msg`Privacy`)}> + {_(msg`Privacy`)} + </InlineLinkText> + {' • '} + <InlineLinkText + to="https://bsky.social/about/support/tos" + label={_(msg`Terms`)}> + {_(msg`Terms`)} + </InlineLinkText> + {' • '} + <InlineLinkText label={_(msg`Help`)} to={HELP_DESK_URL}> + {_(msg`Help`)} + </InlineLinkText> + </Text> - <View - style={[ - styles.message, - { - paddingTop: hasSession ? 0 : 18, - }, - ]}> - <View style={[{flexWrap: 'wrap'}, s.flexRow, a.gap_xs]}> - {hasSession && ( - <> - <TextLink - type="md" - style={pal.link} - href={FEEDBACK_FORM_URL({ - email: currentAccount?.email, - handle: currentAccount?.handle, - })} - text={_(msg`Feedback`)} - /> - <Text type="md" style={pal.textLight}> - · - </Text> - </> - )} - <TextLink - type="md" - style={pal.link} - href="https://bsky.social/about/support/privacy-policy" - text={_(msg`Privacy`)} - /> - <Text type="md" style={pal.textLight}> - · - </Text> - <TextLink - type="md" - style={pal.link} - href="https://bsky.social/about/support/tos" - text={_(msg`Terms`)} - /> - <Text type="md" style={pal.textLight}> - · - </Text> - <TextLink - type="md" - style={pal.link} - href={HELP_DESK_URL} - text={_(msg`Help`)} - /> - </View> - {kawaii && ( - <Text type="md" style={[pal.textLight, {marginTop: 12}]}> - <Trans> - Logo by{' '} - <TextLink - type="md" - href="/profile/sawaratsuki.bsky.social" - text="@sawaratsuki.bsky.social" - style={pal.link} - /> - </Trans> - </Text> - )} - </View> - </View> + {kawaii && ( + <Text style={[t.atoms.text_contrast_medium, {marginTop: 12}]}> + <Trans> + Logo by{' '} + <InlineLinkText + label={_(msg`Logo by @sawaratsuki.bsky.social`)} + to="/profile/sawaratsuki.bsky.social"> + @sawaratsuki.bsky.social + </InlineLinkText> + </Trans> + </Text> + )} </View> ) } - -const styles = StyleSheet.create({ - rightNav: { - // @ts-ignore web only - position: 'fixed', - // @ts-ignore web only - left: '50%', - transform: [ - { - translateX: 300, - }, - ...a.scrollbar_offset.transform, - ], - maxHeight: '100%', - overflowY: 'auto', - }, - - message: { - paddingVertical: 18, - paddingHorizontal: 12, - }, - messageLine: { - marginBottom: 10, - }, - desktopFeedsContainer: { - borderTopWidth: StyleSheet.hairlineWidth, - borderBottomWidth: StyleSheet.hairlineWidth, - marginTop: 18, - marginBottom: 18, - }, -}) |