From 63b93e00d6fe4bc6bd7b9b29d91691651c8a5a9b Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 25 Jan 2025 08:51:07 +0000
Subject: [PATCH 01/11] search input revamp

---
 src/components/forms/TextField.tsx |   2 +-
 src/view/screens/Search/Search.tsx | 110 +++++++++++++++--------------
 2 files changed, 59 insertions(+), 53 deletions(-)

diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx
index 410cc654e9..d28700df95 100644
--- a/src/components/forms/TextField.tsx
+++ b/src/components/forms/TextField.tsx
@@ -226,6 +226,7 @@ export function createInput(Component: typeof TextInput) {
       <>
         <Component
           accessibilityHint={undefined}
+          hitSlop={HITSLOP_20}
           {...rest}
           accessibilityLabel={label}
           ref={refs}
@@ -242,7 +243,6 @@ export function createInput(Component: typeof TextInput) {
           placeholder={placeholder || label}
           placeholderTextColor={t.palette.contrast_500}
           keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
-          hitSlop={HITSLOP_20}
           style={flattened}
         />
 
diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index b11bb0510a..2e8390e1be 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useLayoutEffect} from 'react'
 import {
   ActivityIndicator,
   Image,
@@ -11,6 +11,10 @@ import {
 } from 'react-native'
 import {ScrollView as RNGHScrollView} from 'react-native-gesture-handler'
 import RNPickerSelect from 'react-native-picker-select'
+import Animated, {
+  FadingTransition,
+  LinearTransition,
+} from 'react-native-reanimated'
 import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api'
 import {
   FontAwesomeIcon,
@@ -22,7 +26,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
 
 import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages'
-import {createHitslop} from '#/lib/constants'
+import {createHitslop, HITSLOP_20} from '#/lib/constants'
 import {HITSLOP_10} from '#/lib/constants'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {usePalette} from '#/lib/hooks/usePalette'
@@ -47,7 +51,6 @@ import {useActorSearch} from '#/state/queries/actor-search'
 import {usePopularFeedsSearch} from '#/state/queries/feed'
 import {useSearchPostsQuery} from '#/state/queries/search-posts'
 import {useSession} from '#/state/session'
-import {useSetDrawerOpen} from '#/state/shell'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {Pager} from '#/view/com/pager/Pager'
 import {TabBar} from '#/view/com/pager/TabBar'
@@ -61,16 +64,16 @@ import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search'
 import {makeSearchQuery, parseSearchQuery} from '#/screens/Search/utils'
 import {
   atoms as a,
+  native,
   tokens,
   useBreakpoints,
   useTheme as useThemeNew,
   web,
 } from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {SearchInput} from '#/components/forms/SearchInput'
 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
-import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import * as Layout from '#/components/Layout'
 
 function Loader() {
@@ -602,7 +605,6 @@ export function SearchScreen(
   const navigation = useNavigation<NavigationProp>()
   const textInput = React.useRef<TextInput>(null)
   const {_} = useLingui()
-  const setDrawerOpen = useSetDrawerOpen()
   const setMinimalShellMode = useSetMinimalShellMode()
 
   // Query terms
@@ -621,11 +623,17 @@ export function SearchScreen(
     initialQuery: queryParam,
   })
   const showFilters = Boolean(queryWithParams && !showAutocomplete)
-  /*
-   * Arbitrary sizing, so guess and check, used for sticky header alignment and
-   * sizing.
-   */
-  const headerHeight = 60 + (showFilters ? 40 : 0)
+
+  // web only - measure header height for sticky positioning
+  const [headerHeight, setHeaderHeight] = React.useState(0)
+  const headerRef = React.useRef(null)
+  useLayoutEffect(() => {
+    if (isWeb) {
+      if (!headerRef.current) return
+      const measurement = (headerRef.current as Element).getBoundingClientRect()
+      setHeaderHeight(measurement.height)
+    }
+  }, [])
 
   useFocusEffect(
     useNonReactiveCallback(() => {
@@ -654,11 +662,6 @@ export function SearchScreen(
     loadSearchHistory()
   }, [])
 
-  const onPressMenu = React.useCallback(() => {
-    textInput.current?.blur()
-    setDrawerOpen(true)
-  }, [setDrawerOpen])
-
   const onPressClearQuery = React.useCallback(() => {
     scrollToTopWeb()
     setSearchText('')
@@ -837,33 +840,51 @@ export function SearchScreen(
   return (
     <Layout.Screen testID="searchScreen">
       <View
+        ref={headerRef}
+        onLayout={evt => {
+          if (isWeb) setHeaderHeight(evt.nativeEvent.layout.height)
+        }}
         style={[
+          t.atoms.bg,
           web({
-            height: headerHeight,
             position: 'sticky',
             top: 0,
             zIndex: 1,
           }),
         ]}>
         <Layout.Center>
-          <View style={[a.p_md, a.pb_sm, a.gap_sm, t.atoms.bg]}>
+          {!gtMobile && !showAutocomplete && (
+            <Animated.View
+              layout={native(FadingTransition)}
+              // HACK: shift up search input. we can't remove the top padding
+              // on the search input because it messes up the layout animation
+              // if we add it only when the header is hidden
+              style={{marginBottom: tokens.space.md * -1}}>
+              <Layout.Header.Outer noBottomBorder>
+                <Layout.Header.MenuButton />
+                <Layout.Header.Content
+                  align={showFilters ? 'left' : 'platform'}>
+                  <Layout.Header.TitleText>
+                    <Trans>Search</Trans>
+                  </Layout.Header.TitleText>
+                </Layout.Header.Content>
+                {showFilters ? (
+                  <View style={[{minWidth: 140}]}>
+                    <SearchLanguageDropdown
+                      value={params.lang}
+                      onChange={params.setLang}
+                    />
+                  </View>
+                ) : (
+                  <Layout.Header.Slot />
+                )}
+              </Layout.Header.Outer>
+            </Animated.View>
+          )}
+          <Animated.View
+            style={[a.px_md, a.pt_md, a.pb_sm]}
+            layout={native(LinearTransition)}>
             <View style={[a.flex_row, a.gap_sm]}>
-              {!gtMobile && !showAutocomplete && (
-                <Button
-                  testID="viewHeaderBackOrMenuBtn"
-                  onPress={onPressMenu}
-                  hitSlop={HITSLOP_10}
-                  label={_(msg`Menu`)}
-                  accessibilityHint={_(
-                    msg`Access navigation links and settings`,
-                  )}
-                  size="large"
-                  variant="solid"
-                  color="secondary"
-                  shape="square">
-                  <ButtonIcon icon={Menu} size="lg" />
-                </Button>
-              )}
               <View style={[a.flex_1]}>
                 <SearchInput
                   ref={textInput}
@@ -872,6 +893,8 @@ export function SearchScreen(
                   onChangeText={onChangeText}
                   onClearText={onPressClearQuery}
                   onSubmitEditing={onSubmit}
+                  placeholder={_(msg`Search for posts, users, or feeds`)}
+                  hitSlop={{...HITSLOP_20, top: 0}}
                 />
               </View>
               {showAutocomplete && (
@@ -889,24 +912,7 @@ export function SearchScreen(
                 </Button>
               )}
             </View>
-
-            {showFilters && (
-              <View
-                style={[
-                  a.flex_row,
-                  a.align_center,
-                  a.justify_between,
-                  a.gap_sm,
-                ]}>
-                <View style={[{width: 140}]}>
-                  <SearchLanguageDropdown
-                    value={params.lang}
-                    onChange={params.setLang}
-                  />
-                </View>
-              </View>
-            )}
-          </View>
+          </Animated.View>
         </Layout.Center>
       </View>
 

From 668ae9a12ad7db27954cdc6a020dcb8324c3d0ed Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 25 Jan 2025 16:49:48 +0000
Subject: [PATCH 02/11] fix web

---
 src/view/screens/Search/Search.tsx | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index 2e8390e1be..a15808e326 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -537,12 +537,7 @@ let SearchScreenInner = ({
     <Pager
       onPageSelected={onPageSelected}
       renderTabBar={props => (
-        <Layout.Center
-          style={[
-            a.z_10,
-            web([a.sticky]),
-            {top: isWeb ? headerHeight : undefined},
-          ]}>
+        <Layout.Center style={[a.z_10, web([a.sticky, {top: headerHeight}])]}>
           <TabBar items={sections.map(section => section.title)} {...props} />
         </Layout.Center>
       )}
@@ -845,14 +840,13 @@ export function SearchScreen(
           if (isWeb) setHeaderHeight(evt.nativeEvent.layout.height)
         }}
         style={[
-          t.atoms.bg,
           web({
             position: 'sticky',
             top: 0,
             zIndex: 1,
           }),
         ]}>
-        <Layout.Center>
+        <Layout.Center style={t.atoms.bg}>
           {!gtMobile && !showAutocomplete && (
             <Animated.View
               layout={native(FadingTransition)}
@@ -882,7 +876,7 @@ export function SearchScreen(
             </Animated.View>
           )}
           <Animated.View
-            style={[a.px_md, a.pt_md, a.pb_sm]}
+            style={[a.px_md, a.pt_md, a.pb_sm, a.gap_sm]}
             layout={native(LinearTransition)}>
             <View style={[a.flex_row, a.gap_sm]}>
               <View style={[a.flex_1]}>
@@ -912,6 +906,23 @@ export function SearchScreen(
                 </Button>
               )}
             </View>
+
+            {showFilters && gtMobile && (
+              <View
+                style={[
+                  a.flex_row,
+                  a.align_center,
+                  a.justify_between,
+                  a.gap_sm,
+                ]}>
+                <View style={[{width: 140}]}>
+                  <SearchLanguageDropdown
+                    value={params.lang}
+                    onChange={params.setLang}
+                  />
+                </View>
+              </View>
+            )}
           </Animated.View>
         </Layout.Center>
       </View>

From dc2dae58e85ba46bceede38be0b1bd38f17f8710 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 25 Jan 2025 16:53:26 +0000
Subject: [PATCH 03/11] rm "useThemeNew"

---
 src/view/screens/Search/Search.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index a15808e326..26c13165f1 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -62,14 +62,7 @@ import {Text} from '#/view/com/util/text/Text'
 import {Explore} from '#/view/screens/Search/Explore'
 import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search'
 import {makeSearchQuery, parseSearchQuery} from '#/screens/Search/utils'
-import {
-  atoms as a,
-  native,
-  tokens,
-  useBreakpoints,
-  useTheme as useThemeNew,
-  web,
-} from '#/alf'
+import {atoms as a, native, tokens, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {SearchInput} from '#/components/forms/SearchInput'
@@ -281,7 +274,7 @@ let SearchScreenFeedsResults = ({
   query: string
   active: boolean
 }): React.ReactNode => {
-  const t = useThemeNew()
+  const t = useTheme()
   const {_} = useLingui()
 
   const {data: results, isFetched} = usePopularFeedsSearch({
@@ -326,7 +319,7 @@ function SearchLanguageDropdown({
   value: string
   onChange(value: string): void
 }) {
-  const t = useThemeNew()
+  const t = useTheme()
   const {_} = useLingui()
   const {appLanguage, contentLanguages} = useLanguagePrefs()
 
@@ -595,7 +588,7 @@ SearchScreenInner = React.memo(SearchScreenInner)
 export function SearchScreen(
   props: NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>,
 ) {
-  const t = useThemeNew()
+  const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const navigation = useNavigation<NavigationProp>()
   const textInput = React.useRef<TextInput>(null)

From dc424690b624cd794b078c7e4b44ffa394a86505 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 28 Jan 2025 10:36:30 -0800
Subject: [PATCH 04/11] fix overlap during transition

---
 src/view/screens/Search/Search.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index 26c13165f1..ac87da3915 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -833,10 +833,11 @@ export function SearchScreen(
           if (isWeb) setHeaderHeight(evt.nativeEvent.layout.height)
         }}
         style={[
+          a.relative,
+          a.z_10,
           web({
             position: 'sticky',
             top: 0,
-            zIndex: 1,
           }),
         ]}>
         <Layout.Center style={t.atoms.bg}>

From eb6d8f9b4b6d3a003d0290d32a9a53c06181c28d Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 28 Jan 2025 11:10:44 -0800
Subject: [PATCH 05/11] animate header properly

---
 src/view/screens/Search/Search.tsx | 91 ++++++++++++++++--------------
 1 file changed, 49 insertions(+), 42 deletions(-)

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index ac87da3915..6a30e46fbd 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -12,7 +12,9 @@ import {
 import {ScrollView as RNGHScrollView} from 'react-native-gesture-handler'
 import RNPickerSelect from 'react-native-picker-select'
 import Animated, {
-  FadingTransition,
+  FadeIn,
+  FadeOut,
+  LayoutAnimationConfig,
   LinearTransition,
 } from 'react-native-reanimated'
 import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api'
@@ -841,38 +843,41 @@ export function SearchScreen(
           }),
         ]}>
         <Layout.Center style={t.atoms.bg}>
-          {!gtMobile && !showAutocomplete && (
-            <Animated.View
-              layout={native(FadingTransition)}
-              // HACK: shift up search input. we can't remove the top padding
-              // on the search input because it messes up the layout animation
-              // if we add it only when the header is hidden
-              style={{marginBottom: tokens.space.md * -1}}>
-              <Layout.Header.Outer noBottomBorder>
-                <Layout.Header.MenuButton />
-                <Layout.Header.Content
-                  align={showFilters ? 'left' : 'platform'}>
-                  <Layout.Header.TitleText>
-                    <Trans>Search</Trans>
-                  </Layout.Header.TitleText>
-                </Layout.Header.Content>
-                {showFilters ? (
-                  <View style={[{minWidth: 140}]}>
-                    <SearchLanguageDropdown
-                      value={params.lang}
-                      onChange={params.setLang}
-                    />
-                  </View>
-                ) : (
-                  <Layout.Header.Slot />
-                )}
-              </Layout.Header.Outer>
-            </Animated.View>
-          )}
+          <LayoutAnimationConfig skipEntering skipExiting>
+            {!gtMobile && !showAutocomplete && (
+              <Animated.View
+                entering={FadeIn.delay(100).duration(200)}
+                exiting={FadeOut.duration(200)}
+                // HACK: shift up search input. we can't remove the top padding
+                // on the search input because it messes up the layout animation
+                // if we add it only when the header is hidden
+                style={{marginBottom: tokens.space.md * -1}}>
+                <Layout.Header.Outer noBottomBorder>
+                  <Layout.Header.MenuButton />
+                  <Layout.Header.Content
+                    align={showFilters ? 'left' : 'platform'}>
+                    <Layout.Header.TitleText>
+                      <Trans>Search</Trans>
+                    </Layout.Header.TitleText>
+                  </Layout.Header.Content>
+                  {showFilters ? (
+                    <View style={[{minWidth: 140}]}>
+                      <SearchLanguageDropdown
+                        value={params.lang}
+                        onChange={params.setLang}
+                      />
+                    </View>
+                  ) : (
+                    <Layout.Header.Slot />
+                  )}
+                </Layout.Header.Outer>
+              </Animated.View>
+            )}
+          </LayoutAnimationConfig>
           <Animated.View
             style={[a.px_md, a.pt_md, a.pb_sm, a.gap_sm]}
             layout={native(LinearTransition)}>
-            <View style={[a.flex_row, a.gap_sm]}>
+            <View style={[a.flex_row, a.gap_xs]}>
               <View style={[a.flex_1]}>
                 <SearchInput
                   ref={textInput}
@@ -886,18 +891,20 @@ export function SearchScreen(
                 />
               </View>
               {showAutocomplete && (
-                <Button
-                  label={_(msg`Cancel search`)}
-                  size="large"
-                  variant="ghost"
-                  color="secondary"
-                  style={[a.px_sm]}
-                  onPress={onPressCancelSearch}
-                  hitSlop={HITSLOP_10}>
-                  <ButtonText>
-                    <Trans>Cancel</Trans>
-                  </ButtonText>
-                </Button>
+                <Animated.View entering={FadeIn} exiting={FadeOut}>
+                  <Button
+                    label={_(msg`Cancel search`)}
+                    size="large"
+                    variant="ghost"
+                    color="secondary"
+                    style={[a.px_sm]}
+                    onPress={onPressCancelSearch}
+                    hitSlop={HITSLOP_10}>
+                    <ButtonText>
+                      <Trans>Cancel</Trans>
+                    </ButtonText>
+                  </Button>
+                </Animated.View>
               )}
             </View>
 

From c2358694b245609049df416cdf88dad8c66d867c Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 28 Jan 2025 11:15:00 -0800
Subject: [PATCH 06/11] reduce gap

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

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index 6a30e46fbd..4ab22f784a 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -851,7 +851,7 @@ export function SearchScreen(
                 // HACK: shift up search input. we can't remove the top padding
                 // on the search input because it messes up the layout animation
                 // if we add it only when the header is hidden
-                style={{marginBottom: tokens.space.md * -1}}>
+                style={{marginBottom: tokens.space.sm * -1}}>
                 <Layout.Header.Outer noBottomBorder>
                   <Layout.Header.MenuButton />
                   <Layout.Header.Content
@@ -875,7 +875,7 @@ export function SearchScreen(
             )}
           </LayoutAnimationConfig>
           <Animated.View
-            style={[a.px_md, a.pt_md, a.pb_sm, a.gap_sm]}
+            style={[a.px_md, a.pt_sm, a.pb_sm, a.gap_sm]}
             layout={native(LinearTransition)}>
             <View style={[a.flex_row, a.gap_xs]}>
               <View style={[a.flex_1]}>

From e47fc6845eed1ab1335407a2c0bd7812779fd042 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 30 Jan 2025 11:52:12 -0800
Subject: [PATCH 07/11] animate cancel button in

---
 src/view/screens/Search/Search.tsx | 107 +++++++++++++++++++----------
 1 file changed, 69 insertions(+), 38 deletions(-)

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index 4ab22f784a..35932d51e2 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -1,4 +1,4 @@
-import React, {useLayoutEffect} from 'react'
+import React, {useEffect, useLayoutEffect} from 'react'
 import {
   ActivityIndicator,
   Image,
@@ -16,6 +16,9 @@ import Animated, {
   FadeOut,
   LayoutAnimationConfig,
   LinearTransition,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
 } from 'react-native-reanimated'
 import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api'
 import {
@@ -827,6 +830,26 @@ export function SearchScreen(
     }
   }, [setShowAutocomplete])
 
+  const cancelWidth = useSharedValue(70)
+  const showCancelBtnAnimation = useSharedValue(0)
+
+  useEffect(() => {
+    if (showAutocomplete) {
+      showCancelBtnAnimation.set(withTiming(1))
+    } else {
+      showCancelBtnAnimation.set(withTiming(0))
+    }
+  }, [showAutocomplete, showCancelBtnAnimation])
+
+  const animatedInputContainerStyle = useAnimatedStyle(() => ({
+    marginRight: showCancelBtnAnimation.get() * cancelWidth.get(),
+  }))
+
+  const animatedCancelBtnStyle = useAnimatedStyle(() => ({
+    opacity: showCancelBtnAnimation.get(),
+    right: cancelWidth.get() * -1,
+  }))
+
   return (
     <Layout.Screen testID="searchScreen">
       <View
@@ -846,8 +869,8 @@ export function SearchScreen(
           <LayoutAnimationConfig skipEntering skipExiting>
             {!gtMobile && !showAutocomplete && (
               <Animated.View
-                entering={FadeIn.delay(100).duration(200)}
-                exiting={FadeOut.duration(200)}
+                entering={native(FadeIn.delay(100).duration(200))}
+                exiting={native(FadeOut.duration(200))}
                 // HACK: shift up search input. we can't remove the top padding
                 // on the search input because it messes up the layout animation
                 // if we add it only when the header is hidden
@@ -875,10 +898,11 @@ export function SearchScreen(
             )}
           </LayoutAnimationConfig>
           <Animated.View
-            style={[a.px_md, a.pt_sm, a.pb_sm, a.gap_sm]}
+            style={[a.px_md, a.pt_sm, a.pb_sm, a.overflow_hidden]}
             layout={native(LinearTransition)}>
-            <View style={[a.flex_row, a.gap_xs]}>
-              <View style={[a.flex_1]}>
+            <Animated.View
+              style={[a.gap_sm, a.relative, animatedInputContainerStyle]}>
+              <View style={[a.w_full]}>
                 <SearchInput
                   ref={textInput}
                   value={searchText}
@@ -890,40 +914,47 @@ export function SearchScreen(
                   hitSlop={{...HITSLOP_20, top: 0}}
                 />
               </View>
-              {showAutocomplete && (
-                <Animated.View entering={FadeIn} exiting={FadeOut}>
-                  <Button
-                    label={_(msg`Cancel search`)}
-                    size="large"
-                    variant="ghost"
-                    color="secondary"
-                    style={[a.px_sm]}
-                    onPress={onPressCancelSearch}
-                    hitSlop={HITSLOP_10}>
-                    <ButtonText>
-                      <Trans>Cancel</Trans>
-                    </ButtonText>
-                  </Button>
-                </Animated.View>
-              )}
-            </View>
-
-            {showFilters && gtMobile && (
-              <View
+              <Animated.View
                 style={[
-                  a.flex_row,
-                  a.align_center,
-                  a.justify_between,
-                  a.gap_sm,
-                ]}>
-                <View style={[{width: 140}]}>
-                  <SearchLanguageDropdown
-                    value={params.lang}
-                    onChange={params.setLang}
-                  />
+                  a.absolute,
+                  {top: 0, bottom: 0},
+                  a.pl_xs,
+                  animatedCancelBtnStyle,
+                  !showAutocomplete && a.pointer_events_none,
+                ]}
+                onLayout={evt => cancelWidth.set(evt.nativeEvent.layout.width)}
+                aria-hidden={!showAutocomplete}>
+                <Button
+                  label={_(msg`Cancel search`)}
+                  size="large"
+                  variant="ghost"
+                  color="secondary"
+                  style={[a.px_sm]}
+                  onPress={onPressCancelSearch}
+                  hitSlop={HITSLOP_10}>
+                  <ButtonText>
+                    <Trans>Cancel</Trans>
+                  </ButtonText>
+                </Button>
+              </Animated.View>
+
+              {showFilters && gtMobile && (
+                <View
+                  style={[
+                    a.flex_row,
+                    a.align_center,
+                    a.justify_between,
+                    a.gap_sm,
+                  ]}>
+                  <View style={[{width: 140}]}>
+                    <SearchLanguageDropdown
+                      value={params.lang}
+                      onChange={params.setLang}
+                    />
+                  </View>
                 </View>
-              </View>
-            )}
+              )}
+            </Animated.View>
           </Animated.View>
         </Layout.Center>
       </View>

From 18d8d36cfc30c27c68fab5918b74912a97a94e2f Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 25 Jan 2025 17:33:26 +0000
Subject: [PATCH 08/11] replace with Menu

---
 src/alf/atoms.ts                   |   6 +
 src/components/Menu/index.web.tsx  |   1 +
 src/view/screens/Search/Search.tsx | 218 ++++++++++++++---------------
 3 files changed, 110 insertions(+), 115 deletions(-)

diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index a7cf6cb3f4..eba3335b4f 100644
--- a/src/alf/atoms.ts
+++ b/src/alf/atoms.ts
@@ -50,6 +50,12 @@ export const atoms = {
   overflow_hidden: {
     overflow: 'hidden',
   },
+  /**
+   * @platform web
+   */
+  overflow_auto: web({
+    overflow: 'auto',
+  }),
 
   /*
    * Width
diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx
index dc91161682..e89e0b0321 100644
--- a/src/components/Menu/index.web.tsx
+++ b/src/components/Menu/index.web.tsx
@@ -189,6 +189,7 @@ export function Outer({
             t.name === 'light' ? t.atoms.bg : t.atoms.bg_contrast_25,
             t.atoms.shadow_md,
             t.atoms.border_contrast_low,
+            a.overflow_auto,
             style,
           ]}>
           {children}
diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index 35932d51e2..42b68c07cf 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useLayoutEffect} from 'react'
+import React, {useEffect, useLayoutEffect,useMemo} from 'react'
 import {
   ActivityIndicator,
   Image,
@@ -10,7 +10,6 @@ import {
   View,
 } from 'react-native'
 import {ScrollView as RNGHScrollView} from 'react-native-gesture-handler'
-import RNPickerSelect from 'react-native-picker-select'
 import Animated, {
   FadeIn,
   FadeOut,
@@ -67,12 +66,22 @@ import {Text} from '#/view/com/util/text/Text'
 import {Explore} from '#/view/screens/Search/Explore'
 import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search'
 import {makeSearchQuery, parseSearchQuery} from '#/screens/Search/utils'
-import {atoms as a, native, tokens, useBreakpoints, useTheme, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {
+  atoms as a,
+  native,
+  platform,
+  tokens,
+  useBreakpoints,
+  useTheme,
+  web,
+} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {SearchInput} from '#/components/forms/SearchInput'
-import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
+import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron'
+import {Earth_Stroke2_Corner0_Rounded as EarthIcon} from '#/components/icons/Globe'
 import * as Layout from '#/components/Layout'
+import * as Menu from '#/components/Menu'
 
 function Loader() {
   return (
@@ -324,103 +333,87 @@ function SearchLanguageDropdown({
   value: string
   onChange(value: string): void
 }) {
-  const t = useTheme()
   const {_} = useLingui()
   const {appLanguage, contentLanguages} = useLanguagePrefs()
 
-  const items = React.useMemo(() => {
-    return [
-      {
-        label: _(msg`Any language`),
-        inputLabel: _(msg`Any language`),
-        value: '',
-        key: '*',
-      },
-    ].concat(
-      LANGUAGES.filter(
-        (lang, index, self) =>
-          Boolean(lang.code2) && // reduce to the code2 varieties
-          index === self.findIndex(t => t.code2 === lang.code2), // remove dupes (which will happen)
-      )
-        .map(l => ({
-          label: languageName(l, appLanguage),
-          inputLabel: languageName(l, appLanguage),
-          value: l.code2,
-          key: l.code2 + l.code3,
-        }))
-        .sort((a, b) => {
-          // prioritize user's languages
-          const aIsUser = contentLanguages.includes(a.value)
-          const bIsUser = contentLanguages.includes(b.value)
-          if (aIsUser && !bIsUser) return -1
-          if (bIsUser && !aIsUser) return 1
-          // prioritize "common" langs in the network
-          const aIsCommon = !!APP_LANGUAGES.find(al => al.code2 === a.value)
-          const bIsCommon = !!APP_LANGUAGES.find(al => al.code2 === b.value)
-          if (aIsCommon && !bIsCommon) return -1
-          if (bIsCommon && !aIsCommon) return 1
-          // fall back to alphabetical
-          return a.label.localeCompare(b.label)
-        }),
+  const languages = useMemo(() => {
+    return LANGUAGES.filter(
+      (lang, index, self) =>
+        Boolean(lang.code2) && // reduce to the code2 varieties
+        index === self.findIndex(t => t.code2 === lang.code2), // remove dupes (which will happen)
     )
-  }, [_, appLanguage, contentLanguages])
-
-  const style = {
-    backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
-    color: t.atoms.text.color,
-    fontSize: a.text_xs.fontSize,
-    fontFamily: 'inherit',
-    fontWeight: a.font_bold.fontWeight,
-    paddingHorizontal: 14,
-    paddingRight: 32,
-    paddingVertical: 8,
-    borderRadius: a.rounded_full.borderRadius,
-    borderWidth: a.border.borderWidth,
-    borderColor: t.atoms.border_contrast_low.borderColor,
-  }
+      .map(l => ({
+        label: languageName(l, appLanguage),
+        value: l.code2,
+        key: l.code2 + l.code3,
+      }))
+      .sort((a, b) => {
+        // prioritize user's languages
+        const aIsUser = contentLanguages.includes(a.value)
+        const bIsUser = contentLanguages.includes(b.value)
+        if (aIsUser && !bIsUser) return -1
+        if (bIsUser && !aIsUser) return 1
+        // prioritize "common" langs in the network
+        const aIsCommon = !!APP_LANGUAGES.find(al => al.code2 === a.value)
+        const bIsCommon = !!APP_LANGUAGES.find(al => al.code2 === b.value)
+        if (aIsCommon && !bIsCommon) return -1
+        if (bIsCommon && !aIsCommon) return 1
+        // fall back to alphabetical
+        return a.label.localeCompare(b.label)
+      })
+  }, [appLanguage, contentLanguages])
+
+  const currentLanguageLabel =
+    languages.find(lang => lang.value === value)?.label ?? _(msg`All languages`)
 
   return (
-    <RNPickerSelect
-      darkTheme={t.scheme === 'dark'}
-      placeholder={{}}
-      value={value}
-      onValueChange={onChange}
-      items={items}
-      Icon={() => (
-        <ChevronDown fill={t.atoms.text_contrast_low.color} size="sm" />
-      )}
-      useNativeAndroidPickerStyle={false}
-      style={{
-        iconContainer: {
-          pointerEvents: 'none',
-          right: a.px_sm.paddingRight,
-          top: 0,
-          bottom: 0,
-          display: 'flex',
-          justifyContent: 'center',
-        },
-        inputAndroid: {
-          ...style,
-          paddingVertical: 2,
-        },
-        inputIOS: {
-          ...style,
-        },
-        inputWeb: web({
-          ...style,
-          cursor: 'pointer',
-          // @ts-ignore web only
-          '-moz-appearance': 'none',
-          '-webkit-appearance': 'none',
-          appearance: 'none',
-          outline: 0,
-          borderWidth: 0,
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-        }),
-      }}
-    />
+    <Menu.Root>
+      <Menu.Trigger
+        label={_(
+          msg`Filter search by language (currently: ${currentLanguageLabel})`,
+        )}>
+        {({props}) => (
+          <Button
+            {...props}
+            label={props.accessibilityLabel}
+            size="small"
+            color={platform({native: 'primary', default: 'secondary'})}
+            variant={platform({native: 'ghost', default: 'solid'})}>
+            <ButtonIcon icon={EarthIcon} />
+            <ButtonText>{currentLanguageLabel}</ButtonText>
+            <ButtonIcon
+              icon={platform({
+                native: ChevronDownIcon,
+                default: ChevronDownIcon,
+              })}
+            />
+          </Button>
+        )}
+      </Menu.Trigger>
+      <Menu.Outer>
+        <Menu.LabelText>
+          <Trans>Filter search by language</Trans>
+        </Menu.LabelText>
+        <Menu.Item label={_(msg`All languages`)} onPress={() => onChange('')}>
+          <Menu.ItemText>
+            <Trans>All languages</Trans>
+          </Menu.ItemText>
+          <Menu.ItemRadio selected={value === ''} />
+        </Menu.Item>
+        <Menu.Divider />
+        <Menu.Group>
+          {languages.map(lang => (
+            <Menu.Item
+              key={lang.key}
+              label={lang.label}
+              onPress={() => onChange(lang.value)}>
+              <Menu.ItemText>{lang.label}</Menu.ItemText>
+              <Menu.ItemRadio selected={value === lang.value} />
+            </Menu.Item>
+          ))}
+        </Menu.Group>
+      </Menu.Outer>
+    </Menu.Root>
   )
 }
 
@@ -884,12 +877,10 @@ export function SearchScreen(
                     </Layout.Header.TitleText>
                   </Layout.Header.Content>
                   {showFilters ? (
-                    <View style={[{minWidth: 140}]}>
                       <SearchLanguageDropdown
                         value={params.lang}
                         onChange={params.setLang}
                       />
-                    </View>
                   ) : (
                     <Layout.Header.Slot />
                   )}
@@ -938,23 +929,20 @@ export function SearchScreen(
                 </Button>
               </Animated.View>
 
-              {showFilters && gtMobile && (
-                <View
-                  style={[
-                    a.flex_row,
-                    a.align_center,
-                    a.justify_between,
-                    a.gap_sm,
-                  ]}>
-                  <View style={[{width: 140}]}>
-                    <SearchLanguageDropdown
-                      value={params.lang}
-                      onChange={params.setLang}
-                    />
-                  </View>
-                </View>
-              )}
-            </Animated.View>
+            {showFilters && gtMobile && (
+              <View
+                style={[
+                  a.flex_row,
+                  a.align_center,
+                  a.justify_between,
+                  a.gap_sm,
+                ]}>
+                <SearchLanguageDropdown
+                  value={params.lang}
+                  onChange={params.setLang}
+                />
+              </View>
+            )}
           </Animated.View>
         </Layout.Center>
       </View>

From b929a98999cac6139902fb64d63461b5e0b995e7 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sun, 26 Jan 2025 09:19:29 -0800
Subject: [PATCH 09/11] new icon for native

---
 assets/icons/chevronTopBottom_stroke2_corner0_rounded.svg | 1 +
 src/components/icons/Chevron.tsx                          | 4 ++++
 src/view/screens/Search/Search.tsx                        | 7 +++++--
 3 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 assets/icons/chevronTopBottom_stroke2_corner0_rounded.svg

diff --git a/assets/icons/chevronTopBottom_stroke2_corner0_rounded.svg b/assets/icons/chevronTopBottom_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..249846bc3d
--- /dev/null
+++ b/assets/icons/chevronTopBottom_stroke2_corner0_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M11.293 4.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L12 6.414 8.707 9.707a1 1 0 0 1-1.414-1.414l4-4Zm-4 10a1 1 0 0 1 1.414 0L12 17.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>
diff --git a/src/components/icons/Chevron.tsx b/src/components/icons/Chevron.tsx
index a04e6e0092..4d252ee3ca 100644
--- a/src/components/icons/Chevron.tsx
+++ b/src/components/icons/Chevron.tsx
@@ -15,3 +15,7 @@ export const ChevronTop_Stroke2_Corner0_Rounded = createSinglePathSVG({
 export const ChevronBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M3.293 8.293a1 1 0 0 1 1.414 0L12 15.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z',
 })
+
+export const ChevronTopBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M11.293 4.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L12 6.414 8.707 9.707a1 1 0 0 1-1.414-1.414l4-4Zm-4 10a1 1 0 0 1 1.414 0L12 17.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z',
+})
diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index 42b68c07cf..f38e6a0b21 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -78,7 +78,10 @@ import {
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {SearchInput} from '#/components/forms/SearchInput'
-import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron'
+import {
+  ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon,
+  ChevronTopBottom_Stroke2_Corner0_Rounded as ChevronUpDownIcon,
+} from '#/components/icons/Chevron'
 import {Earth_Stroke2_Corner0_Rounded as EarthIcon} from '#/components/icons/Globe'
 import * as Layout from '#/components/Layout'
 import * as Menu from '#/components/Menu'
@@ -383,7 +386,7 @@ function SearchLanguageDropdown({
             <ButtonText>{currentLanguageLabel}</ButtonText>
             <ButtonIcon
               icon={platform({
-                native: ChevronDownIcon,
+                native: ChevronUpDownIcon,
                 default: ChevronDownIcon,
               })}
             />

From 70a0b71e95ebe5b9e191f021c476fc00f8d5d18a Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sun, 26 Jan 2025 09:19:53 -0800
Subject: [PATCH 10/11] hackfix radix dropdown height

---
 src/view/screens/Search/Search.tsx | 5 ++++-
 src/view/shell/desktop/LeftNav.tsx | 7 +++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index f38e6a0b21..fe35a4dcd7 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -393,7 +393,10 @@ function SearchLanguageDropdown({
           </Button>
         )}
       </Menu.Trigger>
-      <Menu.Outer>
+      <Menu.Outer
+        // HACKFIX: Currently there is no height limit for Radix dropdowns,
+        // so if it's too tall it just goes off screen. TODO: fix internally -sfn
+        style={web({maxHeight: '70vh'})}>
         <Menu.LabelText>
           <Trans>Filter search by language</Trans>
         </Menu.LabelText>
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index e9ba65ed02..bb5de2eb43 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -33,7 +33,7 @@ import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {PressableWithHover} from '#/view/com/util/PressableWithHover'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
-import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, tokens, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {DialogControlProps} from '#/components/Dialog'
 import {ArrowBoxLeft_Stroke2_Corner0_Rounded as LeaveIcon} from '#/components/icons/ArrowBoxLeft'
@@ -235,7 +235,10 @@ function SwitchMenuItems({
     closeEverything()
   }
   return (
-    <Menu.Outer>
+    <Menu.Outer
+      // HACKFIX: Currently there is no height limit for Radix dropdowns,
+      // so if it's too tall it just goes off screen. TODO: fix internally -sfn
+      style={web({maxHeight: '70vh'})}>
       {accounts && accounts.length > 0 && (
         <>
           <Menu.Group>

From 16c45be44f0fc465597c5f5f63743aea609f42bf Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 30 Jan 2025 12:56:21 -0800
Subject: [PATCH 11/11] fix jsx

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

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index fe35a4dcd7..c5a1a8145d 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useLayoutEffect,useMemo} from 'react'
+import React, {useEffect, useLayoutEffect, useMemo} from 'react'
 import {
   ActivityIndicator,
   Image,
@@ -883,10 +883,10 @@ export function SearchScreen(
                     </Layout.Header.TitleText>
                   </Layout.Header.Content>
                   {showFilters ? (
-                      <SearchLanguageDropdown
-                        value={params.lang}
-                        onChange={params.setLang}
-                      />
+                    <SearchLanguageDropdown
+                      value={params.lang}
+                      onChange={params.setLang}
+                    />
                   ) : (
                     <Layout.Header.Slot />
                   )}
@@ -895,10 +895,9 @@ export function SearchScreen(
             )}
           </LayoutAnimationConfig>
           <Animated.View
-            style={[a.px_md, a.pt_sm, a.pb_sm, a.overflow_hidden]}
+            style={[a.px_md, a.pt_sm, a.pb_sm, a.overflow_hidden, a.gap_sm]}
             layout={native(LinearTransition)}>
-            <Animated.View
-              style={[a.gap_sm, a.relative, animatedInputContainerStyle]}>
+            <Animated.View style={[a.relative, animatedInputContainerStyle]}>
               <View style={[a.w_full]}>
                 <SearchInput
                   ref={textInput}
@@ -934,6 +933,7 @@ export function SearchScreen(
                   </ButtonText>
                 </Button>
               </Animated.View>
+            </Animated.View>
 
             {showFilters && gtMobile && (
               <View