From 71b6a447ab250201e5772e43b745edb587b781b7 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 20 Dec 2023 11:02:39 +0000
Subject: [PATCH 1/2] show search in centre column on desktop

---
 src/view/screens/Search/Search.tsx            | 56 ++++++++++---------
 src/view/screens/Search/index.tsx             |  4 +-
 src/view/screens/Search/index.web.tsx         |  3 -
 .../createNativeStackNavigatorWithAuth.tsx    |  3 +-
 src/view/shell/desktop/Feeds.tsx              |  4 +-
 src/view/shell/desktop/RightNav.tsx           | 24 ++++++--
 6 files changed, 52 insertions(+), 42 deletions(-)
 delete mode 100644 src/view/screens/Search/index.web.tsx

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index efd8507a..892dbb5f 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/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(
-  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,17 +521,25 @@ export function SearchScreenMobile(
 
   return (
     <View style={{flex: 1}}>
-      <CenteredView style={[styles.header, pal.border]} sideBorders={isTablet}>
-        <Pressable
-          testID="viewHeaderBackOrMenuBtn"
-          onPress={onPressMenu}
-          hitSlop={HITSLOP_10}
-          style={styles.headerMenuBtn}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Menu`)}
-          accessibilityHint="Access navigation links and settings">
-          <FontAwesomeIcon icon="bars" size={18} color={pal.colors.textLight} />
-        </Pressable>
+      <CenteredView
+        style={[styles.header, pal.border]}
+        sideBorders={isTabletOrDesktop}>
+        {isTabletOrMobile && (
+          <Pressable
+            testID="viewHeaderBackOrMenuBtn"
+            onPress={onPressMenu}
+            hitSlop={HITSLOP_10}
+            style={styles.headerMenuBtn}
+            accessibilityRole="button"
+            accessibilityLabel={_(msg`Menu`)}
+            accessibilityHint="Access navigation links and settings">
+            <FontAwesomeIcon
+              icon="bars"
+              size={18}
+              color={pal.colors.textLight}
+            />
+          </Pressable>
+        )}
 
         <View
           style={[
diff --git a/src/view/screens/Search/index.tsx b/src/view/screens/Search/index.tsx
index a65149bf..f6c0eca2 100644
--- a/src/view/screens/Search/index.tsx
+++ b/src/view/screens/Search/index.tsx
@@ -1,3 +1 @@
-import {SearchScreenMobile} from '#/view/screens/Search/Search'
-
-export const SearchScreen = SearchScreenMobile
+export {SearchScreen} from '#/view/screens/Search/Search'
diff --git a/src/view/screens/Search/index.web.tsx b/src/view/screens/Search/index.web.tsx
deleted file mode 100644
index 8e039e3c..00000000
--- a/src/view/screens/Search/index.web.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import {SearchScreenDesktop} from '#/view/screens/Search/Search'
-
-export const SearchScreen = SearchScreenDesktop
diff --git a/src/view/shell/createNativeStackNavigatorWithAuth.tsx b/src/view/shell/createNativeStackNavigatorWithAuth.tsx
index 43dc2815..9fea6e49 100644
--- a/src/view/shell/createNativeStackNavigatorWithAuth.tsx
+++ b/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>
diff --git a/src/view/shell/desktop/Feeds.tsx b/src/view/shell/desktop/Feeds.tsx
index ff51ffe2..530d606f 100644
--- a/src/view/shell/desktop/Feeds.tsx
+++ b/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,
   },
 })
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index 8d9961a5..02b742dc 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/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 />
-
-        {hasSession && (
-          <View style={{paddingTop: 18, marginBottom: 18}}>
+        {routeName === 'Search' ? (
+          <View style={{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,
+  },
 })

From 363929b1a7defaff8e5224acfcb84cdce4fd1b9a Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 28 Dec 2023 13:41:23 -0800
Subject: [PATCH 2/2] Fix desktop styles a bit

---
 src/view/screens/Search/Search.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index d1fe700b..965ad2b7 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -519,7 +519,11 @@ export function SearchScreen(
   return (
     <View style={{flex: 1}}>
       <CenteredView
-        style={[styles.header, pal.border]}
+        style={[
+          styles.header,
+          pal.border,
+          isTabletOrDesktop && {paddingTop: 10},
+        ]}
         sideBorders={isTabletOrDesktop}>
         {isTabletOrMobile && (
           <Pressable
@@ -600,7 +604,7 @@ export function SearchScreen(
           {isFetching ? (
             <Loader />
           ) : (
-            <ScrollView style={{height: '100%'}}>
+            <ScrollView style={{height: '100%'}} dataSet={{stableGutters: '1'}}>
               {searchResults.length ? (
                 searchResults.map((item, i) => (
                   <SearchResultCard