Merge branch 'web-search' of https://github.com/mozzius/bluesky-official-app into mozzius-web-search

zio/stable
Paul Frazee 2023-12-28 13:27:02 -08:00
commit 47127ce0ab
6 changed files with 52 additions and 42 deletions

View File

@ -303,7 +303,13 @@ function SearchScreenUserResults({query}: {query: string}) {
const SECTIONS_LOGGEDOUT = ['Users'] const SECTIONS_LOGGEDOUT = ['Users']
const SECTIONS_LOGGEDIN = ['Posts', 'Users'] const SECTIONS_LOGGEDIN = ['Posts', 'Users']
export function SearchScreenInner({query}: {query?: string}) { export function SearchScreenInner({
query,
primarySearch,
}: {
query?: string
primarySearch?: boolean
}) {
const pal = usePalette('default') const pal = usePalette('default')
const setMinimalShellMode = useSetMinimalShellMode() const setMinimalShellMode = useSetMinimalShellMode()
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled() const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
@ -413,7 +419,7 @@ export function SearchScreenInner({query}: {query?: string}) {
style={pal.textLight} style={pal.textLight}
/> />
<Text type="xl" style={[pal.textLight, {paddingHorizontal: 18}]}> <Text type="xl" style={[pal.textLight, {paddingHorizontal: 18}]}>
{isDesktop ? ( {isDesktop && !primarySearch ? (
<Trans>Find users with the search tool on the right</Trans> <Trans>Find users with the search tool on the right</Trans>
) : ( ) : (
<Trans>Find users on Bluesky</Trans> <Trans>Find users on Bluesky</Trans>
@ -425,19 +431,7 @@ export function SearchScreenInner({query}: {query?: string}) {
) )
} }
export function SearchScreenDesktop( export function SearchScreen(
props: NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>,
) {
const {isDesktop} = useWebMediaQueries()
return isDesktop ? (
<SearchScreenInner query={props.route.params?.q} />
) : (
<SearchScreenMobile {...props} />
)
}
export function SearchScreenMobile(
props: NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>, props: NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>,
) { ) {
const theme = useTheme() const theme = useTheme()
@ -449,7 +443,7 @@ export function SearchScreenMobile(
const moderationOpts = useModerationOpts() const moderationOpts = useModerationOpts()
const search = useActorAutocompleteFn() const search = useActorAutocompleteFn()
const setMinimalShellMode = useSetMinimalShellMode() const setMinimalShellMode = useSetMinimalShellMode()
const {isTablet} = useWebMediaQueries() const {isTabletOrDesktop, isTabletOrMobile} = useWebMediaQueries()
const searchDebounceTimeout = React.useRef<NodeJS.Timeout | undefined>( const searchDebounceTimeout = React.useRef<NodeJS.Timeout | undefined>(
undefined, undefined,
@ -524,17 +518,25 @@ export function SearchScreenMobile(
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<CenteredView style={[styles.header, pal.border]} sideBorders={isTablet}> <CenteredView
<Pressable style={[styles.header, pal.border]}
testID="viewHeaderBackOrMenuBtn" sideBorders={isTabletOrDesktop}>
onPress={onPressMenu} {isTabletOrMobile && (
hitSlop={HITSLOP_10} <Pressable
style={styles.headerMenuBtn} testID="viewHeaderBackOrMenuBtn"
accessibilityRole="button" onPress={onPressMenu}
accessibilityLabel={_(msg`Menu`)} hitSlop={HITSLOP_10}
accessibilityHint="Access navigation links and settings"> style={styles.headerMenuBtn}
<FontAwesomeIcon icon="bars" size={18} color={pal.colors.textLight} /> accessibilityRole="button"
</Pressable> accessibilityLabel={_(msg`Menu`)}
accessibilityHint="Access navigation links and settings">
<FontAwesomeIcon
icon="bars"
size={18}
color={pal.colors.textLight}
/>
</Pressable>
)}
<View <View
style={[ style={[

View File

@ -1,3 +1 @@
import {SearchScreenMobile} from '#/view/screens/Search/Search' export {SearchScreen} from '#/view/screens/Search/Search'
export const SearchScreen = SearchScreenMobile

View File

@ -1,3 +0,0 @@
import {SearchScreenDesktop} from '#/view/screens/Search/Search'
export const SearchScreen = SearchScreenDesktop

View File

@ -124,6 +124,7 @@ function NativeStackNavigator({
}, },
} }
} }
return ( return (
<NavigationContent> <NavigationContent>
<NativeStackView <NativeStackView
@ -136,7 +137,7 @@ function NativeStackNavigator({
{isWeb && !isMobile && ( {isWeb && !isMobile && (
<> <>
<DesktopLeftNav /> <DesktopLeftNav />
<DesktopRightNav /> <DesktopRightNav routeName={activeRoute.name} />
</> </>
)} )}
</NavigationContent> </NavigationContent>

View File

@ -21,7 +21,7 @@ export function DesktopFeeds() {
}) })
return ( return (
<View style={[styles.container, pal.view, pal.border]}> <View style={[styles.container, pal.view]}>
<FeedItem href="/" title="Following" current={route.name === 'Home'} /> <FeedItem href="/" title="Following" current={route.name === 'Home'} />
{feeds {feeds
.filter(f => f.displayName !== 'Following') .filter(f => f.displayName !== 'Following')
@ -91,7 +91,5 @@ const styles = StyleSheet.create({
width: 300, width: 300,
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 18, paddingVertical: 18,
borderTopWidth: 1,
borderBottomWidth: 1,
}, },
}) })

View File

@ -16,7 +16,7 @@ import {Plural, Trans, msg, plural} from '@lingui/macro'
import {useSession} from '#/state/session' import {useSession} from '#/state/session'
import {useInviteCodesQuery} from '#/state/queries/invites' import {useInviteCodesQuery} from '#/state/queries/invites'
export function DesktopRightNav() { export function DesktopRightNav({routeName}: {routeName: string}) {
const pal = usePalette('default') const pal = usePalette('default')
const palError = usePalette('error') const palError = usePalette('error')
const {_} = useLingui() const {_} = useLingui()
@ -30,12 +30,20 @@ export function DesktopRightNav() {
return ( return (
<View style={[styles.rightNav, pal.view]}> <View style={[styles.rightNav, pal.view]}>
<View style={{paddingVertical: 20}}> <View style={{paddingVertical: 20}}>
<DesktopSearch /> {routeName === 'Search' ? (
<View style={{marginBottom: 18}}>
{hasSession && (
<View style={{paddingTop: 18, marginBottom: 18}}>
<DesktopFeeds /> <DesktopFeeds />
</View> </View>
) : (
<>
<DesktopSearch />
{hasSession && (
<View style={[pal.border, styles.desktopFeedsContainer]}>
<DesktopFeeds />
</View>
)}
</>
)} )}
<View <View
@ -196,4 +204,10 @@ const styles = StyleSheet.create({
marginRight: 6, marginRight: 6,
flexShrink: 0, flexShrink: 0,
}, },
desktopFeedsContainer: {
borderTopWidth: 1,
borderBottomWidth: 1,
marginTop: 18,
marginBottom: 18,
},
}) })