Skip to content

Commit

Permalink
Refactor RightNav
Browse files Browse the repository at this point in the history
  • Loading branch information
estrattonbailey committed Dec 5, 2024
1 parent 11f2efe commit 96bb02a
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 181 deletions.
4 changes: 2 additions & 2 deletions src/components/ProgressGuide/List.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,13 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
</Button>
</View>
<ProgressGuideTask
current={guide.numLikes + 1}
current={0 + 1}
total={10 + 1}
title={_(msg`Like 10 posts`)}
subtitle={_(msg`Teach our algorithm what you like`)}
/>
<ProgressGuideTask
current={guide.numFollows + 1}
current={0 + 1}
total={7 + 1}
title={_(msg`Follow 7 accounts`)}
subtitle={_(msg`Bluesky is better with friends!`)}
Expand Down
92 changes: 35 additions & 57 deletions src/view/shell/desktop/Feeds.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import {StyleSheet, View} from 'react-native'
import {View} from 'react-native'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation, useNavigationState} from '@react-navigation/native'

import {usePalette} from '#/lib/hooks/usePalette'
import {getCurrentRoute} from '#/lib/routes/helpers'
import {NavigationProp} from '#/lib/routes/types'
import {emitSoftReset} from '#/state/events'
import {usePinnedFeedsInfos} from '#/state/queries/feed'
import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
import {TextLink} from '#/view/com/util/Link'
import {atoms as a, useTheme, web} from '#/alf'
import {InlineLinkText} from '#/components/Link'

export function DesktopFeeds() {
const pal = usePalette('default')
const t = useTheme()
const {_} = useLingui()
const {data: pinnedFeedInfos} = usePinnedFeedsInfos()
const selectedFeed = useSelectedFeed()
Expand All @@ -24,76 +24,54 @@ export function DesktopFeeds() {
}
return getCurrentRoute(state)
})

if (!pinnedFeedInfos) {
return null
}

return (
<View style={[styles.container, pal.view]}>
<View
style={[
a.flex_1,
a.gap_md,
web({
paddingVertical: 2, // fixes overflow?
overflowY: 'auto',
}),
]}>
{pinnedFeedInfos.map(feedInfo => {
const feed = feedInfo.feedDescriptor
const current = route.name === 'Home' && feed === selectedFeed

return (
<FeedItem
key={feed}
href={'/?' + new URLSearchParams([['feed', feed]])}
title={feedInfo.displayName}
current={route.name === 'Home' && feed === selectedFeed}
<InlineLinkText
key={feedInfo.uri}
to={'/?' + new URLSearchParams([['feed', feed]])}
label={feedInfo.displayName}
onPress={() => {
setSelectedFeed(feed)
navigation.navigate('Home')
if (route.name === 'Home' && feed === selectedFeed) {
emitSoftReset()
}
}}
/>
style={[
a.text_lg,
current
? [a.font_heavy, t.atoms.text]
: [t.atoms.text_contrast_medium],
]}>
{feedInfo.displayName}
</InlineLinkText>
)
})}
<View style={{paddingTop: 8, paddingBottom: 6}}>
<TextLink
type="lg"
href="/feeds"
text={_(msg`More feeds`)}
style={[pal.link]}
/>
</View>
</View>
)
}

function FeedItem({
title,
href,
current,
onPress,
}: {
title: string
href: string
current: boolean
onPress: () => void
}) {
const pal = usePalette('default')
return (
<View style={{paddingVertical: 6}}>
<TextLink
type="xl"
href={href}
text={title}
onPress={onPress}
style={[
current ? pal.text : pal.textLight,
{letterSpacing: 0.15, fontWeight: current ? '600' : '400'},
]}
/>
<InlineLinkText
to="/feeds"
label={_(msg`More feeds`)}
style={[a.text_lg]}>
{_(msg`More feeds`)}
</InlineLinkText>
</View>
)
}

const styles = StyleSheet.create({
container: {
flex: 1,
// @ts-ignore web only -prf
overflowY: 'auto',
width: 300,
paddingHorizontal: 12,
paddingVertical: 18,
},
})
197 changes: 77 additions & 120 deletions src/view/shell/desktop/RightNav.tsx
Original file line number Diff line number Diff line change
@@ -1,149 +1,106 @@
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, useGutterStyles,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 gutter = useGutterStyles({top: true, bottom: true})

const {isTablet} = useWebMediaQueries()
if (isTablet) {
return null
}

return (
<View style={[a.px_xl, styles.rightNav]}>
<View style={{paddingVertical: 20}}>
{routeName === 'Search' ? (
<View style={{marginBottom: 18}}>
<View
style={[
gutter,
web({
position: 'fixed',
left: '50%',
transform: [
{
translateX: 300,
},
...a.scrollbar_offset.transform,
],
width: 280,
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}>
&middot;
</Text>
</>
)}
<TextLink
type="md"
style={pal.link}
href="https://bsky.social/about/support/privacy-policy"
text={_(msg`Privacy`)}
/>
<Text type="md" style={pal.textLight}>
&middot;
</Text>
<TextLink
type="md"
style={pal.link}
href="https://bsky.social/about/support/tos"
text={_(msg`Terms`)}
/>
<Text type="md" style={pal.textLight}>
&middot;
</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,
},
})
4 changes: 2 additions & 2 deletions src/view/shell/desktop/Search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -225,12 +225,12 @@ export function DesktopSearch() {
const styles = StyleSheet.create({
container: {
position: 'relative',
width: 300,
width: '100%',
},
resultsContainer: {
marginTop: 10,
flexDirection: 'column',
width: 300,
width: '100%',
borderWidth: 1,
borderRadius: 6,
},
Expand Down

0 comments on commit 96bb02a

Please sign in to comment.