show search in centre column on desktop

zio/stable
Samuel Newman 2023-12-20 11:02:39 +00:00
parent e87065f042
commit 71b6a447ab
6 changed files with 52 additions and 42 deletions

View File

@ -306,7 +306,13 @@ function SearchScreenUserResults({query}: {query: string}) {
const SECTIONS_LOGGEDOUT = ['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 setMinimalShellMode = useSetMinimalShellMode()
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
@ -416,7 +422,7 @@ export function SearchScreenInner({query}: {query?: string}) {
style={pal.textLight}
/>
<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 on Bluesky</Trans>
@ -428,19 +434,7 @@ export function SearchScreenInner({query}: {query?: string}) {
)
}
export function SearchScreenDesktop(
props: NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>,
) {
const {isDesktop} = useWebMediaQueries()
return isDesktop ? (
<SearchScreenInner query={props.route.params?.q} />
) : (
<SearchScreenMobile {...props} />
)
}
export function SearchScreenMobile(
export function SearchScreen(
props: NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>,
) {
const theme = useTheme()
@ -452,7 +446,7 @@ export function SearchScreenMobile(
const moderationOpts = useModerationOpts()
const search = useActorAutocompleteFn()
const setMinimalShellMode = useSetMinimalShellMode()
const {isTablet} = useWebMediaQueries()
const {isTabletOrDesktop, isTabletOrMobile} = useWebMediaQueries()
const searchDebounceTimeout = React.useRef<NodeJS.Timeout | undefined>(
undefined,
@ -527,7 +521,10 @@ export function SearchScreenMobile(
return (
<View style={{flex: 1}}>
<CenteredView style={[styles.header, pal.border]} sideBorders={isTablet}>
<CenteredView
style={[styles.header, pal.border]}
sideBorders={isTabletOrDesktop}>
{isTabletOrMobile && (
<Pressable
testID="viewHeaderBackOrMenuBtn"
onPress={onPressMenu}
@ -536,8 +533,13 @@ export function SearchScreenMobile(
accessibilityRole="button"
accessibilityLabel={_(msg`Menu`)}
accessibilityHint="Access navigation links and settings">
<FontAwesomeIcon icon="bars" size={18} color={pal.colors.textLight} />
<FontAwesomeIcon
icon="bars"
size={18}
color={pal.colors.textLight}
/>
</Pressable>
)}
<View
style={[

View File

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

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

View File

@ -21,7 +21,7 @@ export function DesktopFeeds() {
})
return (
<View style={[styles.container, pal.view, pal.border]}>
<View style={[styles.container, pal.view]}>
<FeedItem href="/" title="Following" current={route.name === 'Home'} />
{feeds
.filter(f => f.displayName !== 'Following')
@ -90,7 +90,5 @@ const styles = StyleSheet.create({
width: 300,
paddingHorizontal: 12,
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 {useInviteCodesQuery} from '#/state/queries/invites'
export function DesktopRightNav() {
export function DesktopRightNav({routeName}: {routeName: string}) {
const pal = usePalette('default')
const palError = usePalette('error')
const {_} = useLingui()
@ -30,13 +30,21 @@ export function DesktopRightNav() {
return (
<View style={[styles.rightNav, pal.view]}>
<View style={{paddingVertical: 20}}>
{routeName === 'Search' ? (
<View style={{marginBottom: 18}}>
<DesktopFeeds />
</View>
) : (
<>
<DesktopSearch />
{hasSession && (
<View style={{paddingTop: 18, marginBottom: 18}}>
<View style={[pal.border, styles.desktopFeedsContainer]}>
<DesktopFeeds />
</View>
)}
</>
)}
<View
style={[
@ -196,4 +204,10 @@ const styles = StyleSheet.create({
marginRight: 6,
flexShrink: 0,
},
desktopFeedsContainer: {
borderTopWidth: 1,
borderBottomWidth: 1,
marginTop: 18,
marginBottom: 18,
},
})