show search in centre column on desktop

src/view/screens/Search/Search.tsx

@@ -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(
+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'>,
 ) {
   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,17 +521,25 @@ export function SearchScreenMobile(
 
   return (
     <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
           style={[

src/view/screens/Search/index.tsx

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

src/view/screens/Search/index.web.tsx

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

src/view/shell/createNativeStackNavigatorWithAuth.tsx

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

src/view/shell/desktop/Feeds.tsx

@@ -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,
   },
 })

src/view/shell/desktop/RightNav.tsx

@@ -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,12 +30,20 @@ export function DesktopRightNav() {
   return (
     <View style={[styles.rightNav, pal.view]}>
       <View style={{paddingVertical: 20}}>
-        <DesktopSearch />
+        {routeName === 'Search' ? (
-
+          <View style={{marginBottom: 18}}>
-        {hasSession && (
-          <View style={{paddingTop: 18, marginBottom: 18}}>
             <DesktopFeeds />
           </View>
+        ) : (
+          <>
+            <DesktopSearch />
+
+            {hasSession && (
+              <View style={[pal.border, styles.desktopFeedsContainer]}>
+                <DesktopFeeds />
+              </View>
+            )}
+          </>
         )}
 
         <View
@@ -196,4 +204,10 @@ const styles = StyleSheet.create({
     marginRight: 6,
     flexShrink: 0,
   },
+  desktopFeedsContainer: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    marginTop: 18,
+    marginBottom: 18,
+  },
 })