Refactor sidebar (#6971)
* Refactor RightNav (cherry picked from commit 96bb02acfd2d7452df18a0e7410e6a7169a583ed) * Better gutter handling * Clean up styles * Memoize breakpoints * Format * Comment * Loosen spacing, handle overflow, smaller text to match prod * Fix circular imports on native * Return 0 instead of undefined for easier calculations * Re-assign * Fix * Port over fix from subs/base * Space out right nav feeds, widen sidebar to match prod * Fix lost padding on home header * Fix perf by not actually linking to new URL * Remove underline on focus * Foramt --------- Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
This commit is contained in:
Eric Bailey
@@ -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 {createStaticClick, InlineLinkText} from '#/components/Link'
|
||||
|
||||
export function DesktopFeeds() {
|
||||
const pal = usePalette('default')
|
||||
const t = useTheme()
|
||||
const {_} = useLingui()
|
||||
const {data: pinnedFeedInfos} = usePinnedFeedsInfos()
|
||||
const selectedFeed = useSelectedFeed()
|
||||
@@ -24,76 +24,60 @@ export function DesktopFeeds() {
|
||||
}
|
||||
return getCurrentRoute(state)
|
||||
})
|
||||
|
||||
if (!pinnedFeedInfos) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, pal.view]}>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
web({
|
||||
gap: 10,
|
||||
/*
|
||||
* Small padding prevents overflow prior to actually overflowing the
|
||||
* height of the screen with lots of feeds.
|
||||
*/
|
||||
paddingVertical: 2,
|
||||
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}
|
||||
onPress={() => {
|
||||
<InlineLinkText
|
||||
key={feedInfo.uri}
|
||||
label={feedInfo.displayName}
|
||||
{...createStaticClick(() => {
|
||||
setSelectedFeed(feed)
|
||||
navigation.navigate('Home')
|
||||
if (route.name === 'Home' && feed === selectedFeed) {
|
||||
emitSoftReset()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
})}
|
||||
style={[
|
||||
a.text_md,
|
||||
a.leading_snug,
|
||||
current
|
||||
? [a.font_heavy, t.atoms.text]
|
||||
: [t.atoms.text_contrast_medium],
|
||||
]}
|
||||
numberOfLines={1}>
|
||||
{feedInfo.displayName}
|
||||
</InlineLinkText>
|
||||
)
|
||||
})}
|
||||
<View style={{paddingTop: 8, paddingBottom: 6}}>
|
||||
<TextLink
|
||||
type="lg"
|
||||
href="/feeds"
|
||||
text={_(msg`More feeds`)}
|
||||
style={[pal.link]}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<InlineLinkText
|
||||
to="/feeds"
|
||||
label={_(msg`More feeds`)}
|
||||
style={[a.text_md, a.leading_snug]}
|
||||
numberOfLines={1}>
|
||||
{_(msg`More feeds`)}
|
||||
</InlineLinkText>
|
||||
</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'},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
// @ts-ignore web only -prf
|
||||
overflowY: 'auto',
|
||||
width: 300,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 18,
|
||||
},
|
||||
})
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
})
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user