Merge remote-tracking branch 'origin/main' into left-nav-desktop

* origin/main:
  Adjust line height to not cut off emoji (#5496)
  Emoji in account list (#5497)
  Make the counter more rounded (#5083)
  add emoji prop to composer reply to text (#5495)
  Fix banner height in edit profile modal (#5494)
  Messages list - make avatars link to profile (#5484)
  Add back empty placeholder (#5489)
  Filter errors that get sent to Sentry (#5247)
  Add language filtering UI to search (#5459)

__tests__/lib/errors.test.ts

@@ -9,11 +9,11 @@ describe('isNetworkError', () => {
   ]
   const outputs = [true, false, false, true]
 
-  it('correctly distinguishes network errors', () => {
   for (let i = 0; i < inputs.length; i++) {
     const input = inputs[i]
-      const result = isNetworkError(input)
+    const output = outputs[i]
-      expect(result).toEqual(outputs[i])
+    it(`correctly distinguishes network errors for ${input}`, () => {
-    }
+      expect(isNetworkError(input)).toEqual(output)
     })
+  }
 })

src/alf/themes.ts

@@ -305,6 +305,7 @@ export function createThemes({
   } as const
 
   const light: Theme = {
+    scheme: 'light',
     name: 'light',
     palette: lightPalette,
     atoms: {
@@ -390,6 +391,7 @@ export function createThemes({
   }
 
   const dark: Theme = {
+    scheme: 'dark',
     name: 'dark',
     palette: darkPalette,
     atoms: {
@@ -479,6 +481,7 @@ export function createThemes({
 
   const dim: Theme = {
     ...dark,
+    scheme: 'dark',
     name: 'dim',
     palette: dimPalette,
     atoms: {

src/alf/types.ts

@@ -156,6 +156,7 @@ export type ThemedAtoms = {
   }
 }
 export type Theme = {
+  scheme: 'light' | 'dark' // for library support
   name: ThemeName
   palette: Palette
   atoms: ThemedAtoms

src/components/AccountList.tsx

@@ -126,10 +126,12 @@ function AccountItem({
             <UserAvatar avatar={profile?.avatar} size={24} />
           </View>
           <Text style={[a.align_baseline, a.flex_1, a.flex_row, a.py_sm]}>
-            <Text style={[a.font_bold]}>
+            <Text emoji style={[a.font_bold]}>
               {profile?.displayName || account.handle}{' '}
             </Text>
-            <Text style={[t.atoms.text_contrast_medium]}>{account.handle}</Text>
+            <Text emoji style={[t.atoms.text_contrast_medium]}>
+              {account.handle}
+            </Text>
           </Text>
           {isCurrentAccount ? (
             <Check

src/components/forms/TextField.tsx

@@ -135,6 +135,8 @@ export function createInput(Component: typeof TextInput) {
     placeholder,
     value,
     onChangeText,
+    onFocus,
+    onBlur,
     isInvalid,
     inputRef,
     style,
@@ -173,8 +175,14 @@ export function createInput(Component: typeof TextInput) {
           ref={refs}
           value={value}
           onChangeText={onChangeText}
-          onFocus={ctx.onFocus}
+          onFocus={e => {
-          onBlur={ctx.onBlur}
+            ctx.onFocus()
+            onFocus?.(e)
+          }}
+          onBlur={e => {
+            ctx.onBlur()
+            onBlur?.(e)
+          }}
           placeholder={placeholder || label}
           placeholderTextColor={t.palette.contrast_500}
           keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
@@ -188,8 +196,8 @@ export function createInput(Component: typeof TextInput) {
             a.px_xs,
             {
               // paddingVertical doesn't work w/multiline - esb
-              paddingTop: 14,
+              paddingTop: 12,
-              paddingBottom: 14,
+              paddingBottom: 13,
               lineHeight: a.text_md.fontSize * 1.1875,
               textAlignVertical: rest.multiline ? 'top' : undefined,
               minHeight: rest.multiline ? 80 : undefined,
@@ -197,13 +205,14 @@ export function createInput(Component: typeof TextInput) {
             },
             // fix for autofill styles covering border
             web({
-              paddingTop: 12,
+              paddingTop: 10,
-              paddingBottom: 12,
+              paddingBottom: 11,
               marginTop: 2,
               marginBottom: 2,
             }),
             android({
-              paddingBottom: 16,
+              paddingTop: 8,
+              paddingBottom: 8,
             }),
             style,
           ]}

src/lib/strings/errors.ts

@@ -20,11 +20,19 @@ export function cleanError(str: any): string {
   return str
 }
 
+const NETWORK_ERRORS = [
+  'Abort',
+  'Network request failed',
+  'Failed to fetch',
+  'Load failed',
+]
+
 export function isNetworkError(e: unknown) {
   const str = String(e)
-  return (
+  for (const err of NETWORK_ERRORS) {
-    str.includes('Abort') ||
+    if (str.includes(err)) {
-    str.includes('Network request failed') ||
+      return true
-    str.includes('Failed to fetch')
+    }
-  )
+  }
+  return false
 }

src/logger/index.ts

@@ -1,10 +1,11 @@
 import format from 'date-fns/format'
 import {nanoid} from 'nanoid/non-secure'
 
-import {Sentry} from '#/logger/sentry'
+import {isNetworkError} from '#/lib/strings/errors'
-import * as env from '#/env'
 import {DebugContext} from '#/logger/debugContext'
 import {add} from '#/logger/logDump'
+import {Sentry} from '#/logger/sentry'
+import * as env from '#/env'
 
 export enum LogLevel {
   Debug = 'debug',
@@ -160,6 +161,11 @@ export const sentryTransport: Transport = (
       timestamp: timestamp / 1000, // Sentry expects seconds
     })
 
+    // We don't want to send any network errors to sentry
+    if (isNetworkError(message)) {
+      return
+    }
+
     /**
      * Send all higher levels with `captureMessage`, with appropriate severity
      * level

src/screens/Messages/List/ChatListItem.tsx

@@ -24,8 +24,9 @@ import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSession} from '#/state/session'
 import {TimeElapsed} from '#/view/com/util/TimeElapsed'
-import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+import * as tokens from '#/alf/tokens'
 import {ConvoMenu} from '#/components/dms/ConvoMenu'
 import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/Bell2'
 import {Link} from '#/components/Link'
@@ -203,6 +204,19 @@ function ChatListItemReady({
       onFocus={onFocus}
       onBlur={onMouseLeave}
       style={[a.relative]}>
+      <View
+        style={[
+          a.z_10,
+          a.absolute,
+          {top: tokens.space.md, left: tokens.space.lg},
+        ]}>
+        <PreviewableUserAvatar
+          profile={profile}
+          size={52}
+          moderation={moderation.ui('avatar')}
+        />
+      </View>
+
       <Link
         to={`/messages/${convo.id}`}
         label={displayName}
@@ -236,11 +250,8 @@ function ChatListItemReady({
               (hovered || pressed || focused) && t.atoms.bg_contrast_25,
               t.atoms.border_contrast_low,
             ]}>
-            <UserAvatar
+            {/* Avatar goes here */}
-              avatar={profile.avatar}
+            <View style={{width: 52, height: 52}} />
-              size={52}
-              moderation={moderation.ui('avatar')}
-            />
 
             <View style={[a.flex_1, a.justify_center, web({paddingRight: 45})]}>
               <View style={[a.w_full, a.flex_row, a.align_end, a.pb_2xs]}>
@@ -357,7 +368,7 @@ function ChatListItemReady({
           a.self_end,
           a.justify_center,
           {
-            right: a.px_lg.paddingRight,
+            right: tokens.space.lg,
             opacity: !gtMobile || showActions || menuControl.isOpen ? 1 : 0,
           },
         ]}

src/screens/Search/__tests__/utils.test.ts

@@ -0,0 +1,43 @@
+import {describe, expect, it} from '@jest/globals'
+
+import {parseSearchQuery} from '#/screens/Search/utils'
+
+describe(`parseSearchQuery`, () => {
+  const tests = [
+    {
+      input: `bluesky`,
+      output: {query: `bluesky`, params: {}},
+    },
+    {
+      input: `bluesky from:esb.lol`,
+      output: {query: `bluesky`, params: {from: `esb.lol`}},
+    },
+    {
+      input: `bluesky "from:esb.lol"`,
+      output: {query: `bluesky "from:esb.lol"`, params: {}},
+    },
+    {
+      input: `bluesky mentions:@esb.lol`,
+      output: {query: `bluesky`, params: {mentions: `@esb.lol`}},
+    },
+    {
+      input: `bluesky since:2021-01-01:00:00:00`,
+      output: {query: `bluesky`, params: {since: `2021-01-01:00:00:00`}},
+    },
+    {
+      input: `bluesky lang:"en"`,
+      output: {query: `bluesky`, params: {lang: `en`}},
+    },
+    {
+      input: `bluesky "literal" lang:en "from:invalid"`,
+      output: {query: `bluesky "literal" "from:invalid"`, params: {lang: `en`}},
+    },
+  ]
+
+  it.each(tests)(
+    `$input -> $output.query $output.params`,
+    ({input, output}) => {
+      expect(parseSearchQuery(input)).toEqual(output)
+    },
+  )
+})

src/screens/Search/utils.ts

@@ -0,0 +1,43 @@
+export type Params = Record<string, string>
+
+export function parseSearchQuery(rawQuery: string) {
+  let base = rawQuery
+  const rawLiterals = rawQuery.match(/[^:\w\d]".+?"/gi) || []
+
+  // remove literals from base
+  for (const literal of rawLiterals) {
+    base = base.replace(literal.trim(), '')
+  }
+
+  // find remaining params in base
+  const rawParams = base.match(/[a-z]+:[a-z-\.@\d:"]+/gi) || []
+
+  for (const param of rawParams) {
+    base = base.replace(param, '')
+  }
+
+  base = base.trim()
+
+  const params = rawParams.reduce((params, param) => {
+    const [name, ...value] = param.split(/:/)
+    params[name] = value.join(':').replace(/"/g, '') // dates can contain additional colons
+    return params
+  }, {} as Params)
+  const literals = rawLiterals.map(l => String(l).trim())
+
+  return {
+    query: [base, literals.join(' ')].filter(Boolean).join(' '),
+    params,
+  }
+}
+
+export function makeSearchQuery(query: string, params: Params) {
+  return [
+    query,
+    Object.entries(params)
+      .map(([name, value]) => `${name}:${value}`)
+      .join(' '),
+  ]
+    .filter(Boolean)
+    .join(' ')
+}

src/view/com/composer/ComposerReplyTo.tsx

@@ -10,12 +10,12 @@ import {
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
-import {sanitizeHandle} from 'lib/strings/handles'
+import {sanitizeHandle} from '#/lib/strings/handles'
-import {ComposerOptsPostRef} from 'state/shell/composer'
+import {ComposerOptsPostRef} from '#/state/shell/composer'
-import {QuoteEmbed} from 'view/com/util/post-embeds/QuoteEmbed'
+import {QuoteEmbed} from '#/view/com/util/post-embeds/QuoteEmbed'
-import {Text} from 'view/com/util/text/Text'
+import {Text} from '#/view/com/util/text/Text'
-import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
+import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
 
 export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
@@ -91,7 +91,7 @@ export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
         type={replyTo.author.associated?.labeler ? 'labeler' : 'user'}
       />
       <View style={styles.replyToPost}>
-        <Text type="xl-medium" style={t.atoms.text} numberOfLines={1}>
+        <Text type="xl-medium" style={t.atoms.text} numberOfLines={1} emoji>
           {sanitizeDisplayName(
             replyTo.author.displayName || sanitizeHandle(replyTo.author.handle),
           )}
@@ -101,7 +101,8 @@ export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
             <Text
               type="post-text"
               style={t.atoms.text}
-              numberOfLines={!showFull ? 6 : undefined}>
+              numberOfLines={!showFull ? 6 : undefined}
+              emoji>
               {replyTo.text}
             </Text>
           </View>

src/view/com/modals/EditProfile.tsx

@@ -27,11 +27,11 @@ import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
 import {useProfileUpdateMutation} from '#/state/queries/profile'
+import {Text} from '#/view/com/util/text/Text'
+import * as Toast from '#/view/com/util/Toast'
+import {EditableUserAvatar} from '#/view/com/util/UserAvatar'
+import {UserBanner} from '#/view/com/util/UserBanner'
 import {ErrorMessage} from '../util/error/ErrorMessage'
-import {Text} from '../util/text/Text'
-import * as Toast from '../util/Toast'
-import {EditableUserAvatar} from '../util/UserAvatar'
-import {UserBanner} from '../util/UserBanner'
 
 const AnimatedTouchableOpacity =
   Animated.createAnimatedComponent(TouchableOpacity)

src/view/com/util/PostMeta.tsx

@@ -77,7 +77,7 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
             disableMismatchWarning
             onPress={onBeforePressAuthor}
             style={[t.atoms.text]}>
-            <Text emoji style={[a.text_md, a.font_bold, a.leading_tight]}>
+            <Text emoji style={[a.text_md, a.font_bold, a.leading_snug]}>
               {forceLTR(
                 sanitizeDisplayName(
                   displayName,
@@ -92,14 +92,10 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
             disableMismatchWarning
             disableUnderline
             onPress={onBeforePressAuthor}
-            style={[a.text_md, t.atoms.text_contrast_medium, a.leading_tight]}>
+            style={[a.text_md, t.atoms.text_contrast_medium, a.leading_snug]}>
             <Text
               emoji
-              style={[
+              style={[a.text_md, t.atoms.text_contrast_medium, a.leading_snug]}>
-                a.text_md,
-                t.atoms.text_contrast_medium,
-                a.leading_tight,
-              ]}>
               {NON_BREAKING_SPACE + sanitizeHandle(handle, '@')}
             </Text>
           </WebOnlyInlineLinkText>
@@ -124,7 +120,7 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
             style={[
               a.text_md,
               t.atoms.text_contrast_medium,
-              a.leading_tight,
+              a.leading_snug,
               web({
                 whiteSpace: 'nowrap',
               }),

src/view/com/util/UserAvatar.tsx

@@ -327,7 +327,8 @@ let EditableUserAvatar = ({
 
       onSelectNewAvatar(croppedImage)
     } catch (e: any) {
-      if (!String(e).includes('Canceled')) {
+      // Don't log errors for cancelling selection to sentry on ios or android
+      if (!String(e).toLowerCase().includes('cancel')) {
         logger.error('Failed to crop banner', {error: e})
       }
     }

src/view/com/util/UserBanner.tsx

@@ -202,7 +202,7 @@ const styles = StyleSheet.create({
   },
   bannerImage: {
     width: '100%',
-    height: '100%',
+    height: 150,
   },
   defaultBanner: {
     backgroundColor: '#0070ff',

src/view/screens/Search/Search.tsx

@@ -11,6 +11,7 @@ import {
   View,
 } from 'react-native'
 import {ScrollView as RNGHScrollView} from 'react-native-gesture-handler'
+import RNPickerSelect from 'react-native-picker-select'
 import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api'
 import {
   FontAwesomeIcon,
@@ -21,6 +22,7 @@ import {useLingui} from '@lingui/react'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
 
+import {LANGUAGES} from '#/lib/../locale/languages'
 import {useAnalytics} from '#/lib/analytics/analytics'
 import {createHitslop} from '#/lib/constants'
 import {HITSLOP_10} from '#/lib/constants'
@@ -35,10 +37,10 @@ import {
   SearchTabNavigatorParams,
 } from '#/lib/routes/types'
 import {augmentSearchQuery} from '#/lib/strings/helpers'
-import {useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import {listenSoftReset} from '#/state/events'
+import {useLanguagePrefs} from '#/state/preferences/languages'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
 import {useActorSearch} from '#/state/queries/actor-search'
@@ -57,9 +59,16 @@ import {Text} from '#/view/com/util/text/Text'
 import {CenteredView, ScrollView} from '#/view/com/util/Views'
 import {Explore} from '#/view/screens/Search/Explore'
 import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search'
-import {atoms as a, useTheme as useThemeNew} from '#/alf'
+import {makeSearchQuery, parseSearchQuery} from '#/screens/Search/utils'
+import {atoms as a, useBreakpoints, useTheme as useThemeNew, web} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
+import * as TextField from '#/components/forms/TextField'
+import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
+import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '#/components/icons/SettingsGear2'
+import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 
 function Loader() {
   const pal = usePalette('default')
@@ -251,7 +260,7 @@ let SearchScreenUserResults = ({
   const {_} = useLingui()
 
   const {data: results, isFetched} = useActorSearch({
-    query: query,
+    query,
     enabled: active,
   })
 
@@ -324,7 +333,138 @@ let SearchScreenFeedsResults = ({
 }
 SearchScreenFeedsResults = React.memo(SearchScreenFeedsResults)
 
-let SearchScreenInner = ({query}: {query?: string}): React.ReactNode => {
+function SearchLanguageDropdown({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange(value: string): void
+}) {
+  const t = useThemeNew()
+  const {contentLanguages} = useLanguagePrefs()
+
+  const items = React.useMemo(() => {
+    return LANGUAGES.filter(l => Boolean(l.code2))
+      .map(l => ({
+        label: l.name,
+        inputLabel: l.name,
+        value: l.code2,
+        key: l.code2 + l.code3,
+      }))
+      .sort(a => (contentLanguages.includes(a.value) ? -1 : 1))
+  }, [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,
+  }
+
+  return (
+    <RNPickerSelect
+      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',
+        }),
+      }}
+    />
+  )
+}
+
+function useQueryManager({initialQuery}: {initialQuery: string}) {
+  const {contentLanguages} = useLanguagePrefs()
+  const {query, params: initialParams} = React.useMemo(() => {
+    return parseSearchQuery(initialQuery || '')
+  }, [initialQuery])
+  const prevInitialQuery = React.useRef(initialQuery)
+  const [lang, setLang] = React.useState(
+    initialParams.lang || contentLanguages[0],
+  )
+
+  if (initialQuery !== prevInitialQuery.current) {
+    // handle new queryParam change (from manual search entry)
+    prevInitialQuery.current = initialQuery
+    setLang(initialParams.lang || contentLanguages[0])
+  }
+
+  const params = React.useMemo(
+    () => ({
+      // default stuff
+      ...initialParams,
+      // managed stuff
+      lang,
+    }),
+    [lang, initialParams],
+  )
+  const handlers = React.useMemo(
+    () => ({
+      setLang,
+    }),
+    [setLang],
+  )
+
+  return React.useMemo(() => {
+    return {
+      query,
+      queryWithParams: makeSearchQuery(query, params),
+      params: {
+        ...params,
+        ...handlers,
+      },
+    }
+  }, [query, params, handlers])
+}
+
+let SearchScreenInner = ({
+  query,
+  queryWithParams,
+  headerHeight,
+}: {
+  query: string
+  queryWithParams: string
+  headerHeight: number
+}): React.ReactNode => {
   const pal = usePalette('default')
   const setMinimalShellMode = useSetMinimalShellMode()
   const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
@@ -349,7 +489,7 @@ let SearchScreenInner = ({query}: {query?: string}): React.ReactNode => {
         title: _(msg`Top`),
         component: (
           <SearchScreenPostResults
-            query={query}
+            query={queryWithParams}
             sort="top"
             active={activeTab === 0}
           />
@@ -359,7 +499,7 @@ let SearchScreenInner = ({query}: {query?: string}): React.ReactNode => {
         title: _(msg`Latest`),
         component: (
           <SearchScreenPostResults
-            query={query}
+            query={queryWithParams}
             sort="latest"
             active={activeTab === 1}
           />
@@ -378,7 +518,7 @@ let SearchScreenInner = ({query}: {query?: string}): React.ReactNode => {
         ),
       },
     ]
-  }, [_, query, activeTab])
+  }, [_, query, queryWithParams, activeTab])
 
   return query ? (
     <Pager
@@ -386,7 +526,15 @@ let SearchScreenInner = ({query}: {query?: string}): React.ReactNode => {
       renderTabBar={props => (
         <CenteredView
           sideBorders
-          style={[pal.border, pal.view, styles.tabBarContainer]}>
+          style={[
+            pal.border,
+            pal.view,
+            web({
+              position: isWeb ? 'sticky' : '',
+              zIndex: 1,
+            }),
+            {top: isWeb ? headerHeight : undefined},
+          ]}>
           <TabBar items={sections.map(section => section.title)} {...props} />
         </CenteredView>
       )}
@@ -448,14 +596,14 @@ SearchScreenInner = React.memo(SearchScreenInner)
 export function SearchScreen(
   props: NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>,
 ) {
+  const t = useThemeNew()
+  const {gtMobile} = useBreakpoints()
   const navigation = useNavigation<NavigationProp>()
   const textInput = React.useRef<TextInput>(null)
   const {_} = useLingui()
-  const pal = usePalette('default')
   const {track} = useAnalytics()
   const setDrawerOpen = useSetDrawerOpen()
   const setMinimalShellMode = useSetMinimalShellMode()
-  const {isTabletOrDesktop, isTabletOrMobile} = useWebMediaQueries()
 
   // Query terms
   const queryParam = props.route?.params?.q ?? ''
@@ -469,6 +617,17 @@ export function SearchScreen(
     AppBskyActorDefs.ProfileViewBasic[]
   >([])
 
+  const {params, query, queryWithParams} = useQueryManager({
+    initialQuery: queryParam,
+  })
+  const showFiltersButton = Boolean(query && !showAutocomplete)
+  const [showFilters, setShowFilters] = React.useState(false)
+  /*
+   * Arbitrary sizing, so guess and check, used for sticky header alignment and
+   * sizing.
+   */
+  const headerHeight = 56 + (showFilters ? 40 : 0)
+
   useFocusEffect(
     useNonReactiveCallback(() => {
       if (isWeb) {
@@ -507,13 +666,6 @@ export function SearchScreen(
     textInput.current?.focus()
   }, [])
 
-  const onPressCancelSearch = React.useCallback(() => {
-    scrollToTopWeb()
-    textInput.current?.blur()
-    setShowAutocomplete(false)
-    setSearchText(queryParam)
-  }, [queryParam])
-
   const onChangeText = React.useCallback(async (text: string) => {
     scrollToTopWeb()
     setSearchText(text)
@@ -586,6 +738,13 @@ export function SearchScreen(
     [updateSearchHistory, navigation],
   )
 
+  const onPressCancelSearch = React.useCallback(() => {
+    scrollToTopWeb()
+    textInput.current?.blur()
+    setShowAutocomplete(false)
+    setSearchText(queryParam)
+  }, [setShowAutocomplete, setSearchText, queryParam])
+
   const onSubmit = React.useCallback(() => {
     navigateToItem(searchText)
   }, [navigateToItem, searchText])
@@ -624,6 +783,7 @@ export function SearchScreen(
       setSearchText('')
       navigation.setParams({q: ''})
     }
+    setShowFilters(false)
   }, [navigation])
 
   useFocusEffect(
@@ -663,50 +823,107 @@ export function SearchScreen(
     [selectedProfiles],
   )
 
+  const onSearchInputFocus = React.useCallback(() => {
+    if (isWeb) {
+      // Prevent a jump on iPad by ensuring that
+      // the initial focused render has no result list.
+      requestAnimationFrame(() => {
+        setShowAutocomplete(true)
+      })
+    } else {
+      setShowAutocomplete(true)
+    }
+    setShowFilters(false)
+  }, [setShowAutocomplete])
+
   return (
     <View style={isWeb ? null : {flex: 1}}>
       <CenteredView
         style={[
-          styles.header,
+          a.p_md,
-          pal.border,
+          a.pb_0,
-          pal.view,
+          a.gap_sm,
-          isTabletOrDesktop && {paddingTop: 10},
+          t.atoms.bg,
+          web({
+            height: headerHeight,
+            position: 'sticky',
+            top: 0,
+            zIndex: 1,
+          }),
         ]}
-        sideBorders={isTabletOrDesktop}>
+        sideBorders={gtMobile}>
-        {isTabletOrMobile && (
+        <View style={[a.flex_row, a.gap_sm]}>
-          <Pressable
+          {!gtMobile && (
+            <Button
               testID="viewHeaderBackOrMenuBtn"
               onPress={onPressMenu}
               hitSlop={HITSLOP_10}
-            style={styles.headerMenuBtn}
+              label={_(msg`Menu`)}
-            accessibilityRole="button"
+              accessibilityHint={_(msg`Access navigation links and settings`)}
-            accessibilityLabel={_(msg`Menu`)}
+              size="large"
-            accessibilityHint={_(msg`Access navigation links and settings`)}>
+              variant="solid"
-            <Menu size="lg" fill={pal.colors.textLight} />
+              color="secondary"
-          </Pressable>
+              shape="square">
+              <ButtonIcon icon={Menu} size="lg" />
+            </Button>
           )}
           <SearchInputBox
             textInput={textInput}
             searchText={searchText}
             showAutocomplete={showAutocomplete}
-          setShowAutocomplete={setShowAutocomplete}
+            onFocus={onSearchInputFocus}
             onChangeText={onChangeText}
             onSubmit={onSubmit}
             onPressClearQuery={onPressClearQuery}
           />
+          {showFiltersButton && (
+            <Button
+              onPress={() => setShowFilters(!showFilters)}
+              hitSlop={HITSLOP_10}
+              label={_(msg`Show advanced filters`)}
+              size="large"
+              variant="solid"
+              color="secondary"
+              shape="square">
+              <Gear
+                size="md"
+                fill={
+                  showFilters
+                    ? t.palette.primary_500
+                    : t.atoms.text_contrast_low.color
+                }
+              />
+            </Button>
+          )}
           {showAutocomplete && (
-          <View style={[styles.headerCancelBtn]}>
+            <Button
-            <Pressable
+              label={_(msg`Cancel search`)}
+              size="large"
+              variant="ghost"
+              color="secondary"
+              style={[a.px_sm]}
               onPress={onPressCancelSearch}
-              accessibilityRole="button"
               hitSlop={HITSLOP_10}>
-              <Text style={pal.text}>
+              <ButtonText>
                 <Trans>Cancel</Trans>
-              </Text>
+              </ButtonText>
-            </Pressable>
+            </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>
         )}
       </CenteredView>
+
       <View
         style={{
           display: showAutocomplete ? 'flex' : 'none',
@@ -737,7 +954,11 @@ export function SearchScreen(
           display: showAutocomplete ? 'none' : 'flex',
           flex: 1,
         }}>
-        <SearchScreenInner query={queryParam} />
+        <SearchScreenInner
+          query={query}
+          queryWithParams={queryWithParams}
+          headerHeight={headerHeight}
+        />
       </View>
     </View>
   )
@@ -747,7 +968,7 @@ let SearchInputBox = ({
   textInput,
   searchText,
   showAutocomplete,
-  setShowAutocomplete,
+  onFocus,
   onChangeText,
   onSubmit,
   onPressClearQuery,
@@ -755,83 +976,62 @@ let SearchInputBox = ({
   textInput: React.RefObject<TextInput>
   searchText: string
   showAutocomplete: boolean
-  setShowAutocomplete: (show: boolean) => void
+  onFocus: () => void
   onChangeText: (text: string) => void
   onSubmit: () => void
   onPressClearQuery: () => void
 }): React.ReactNode => {
-  const pal = usePalette('default')
   const {_} = useLingui()
-  const theme = useTheme()
+  const t = useThemeNew()
+
   return (
-    <Pressable
+    <View style={[a.flex_1, a.relative]}>
-      // This only exists only for extra hitslop so don't expose it to the a11y tree.
+      <TextField.Root>
-      accessible={false}
+        <TextField.Icon icon={MagnifyingGlass} />
-      focusable={false}
+        <TextField.Input
-      // @ts-ignore web-only
+          inputRef={textInput}
-      tabIndex={-1}
+          label={_(msg`Search`)}
-      style={[
-        {backgroundColor: pal.colors.backgroundLight},
-        styles.headerSearchContainer,
-        // @ts-expect-error web only
-        isWeb && {
-          cursor: 'default',
-        },
-      ]}
-      onPress={() => {
-        textInput.current?.focus()
-      }}>
-      <MagnifyingGlassIcon
-        style={[pal.icon, styles.headerSearchIcon]}
-        size={20}
-      />
-      <TextInput
-        testID="searchTextInput"
-        ref={textInput}
-        placeholder={_(msg`Search`)}
-        placeholderTextColor={pal.colors.textLight}
-        returnKeyType="search"
           value={searchText}
-        style={[pal.text, styles.headerSearchInput]}
+          placeholder={_(msg`Search`)}
-        keyboardAppearance={theme.colorScheme}
+          returnKeyType="search"
-        selectTextOnFocus={isNative}
-        onFocus={() => {
-          if (isWeb) {
-            // Prevent a jump on iPad by ensuring that
-            // the initial focused render has no result list.
-            requestAnimationFrame(() => {
-              setShowAutocomplete(true)
-            })
-          } else {
-            setShowAutocomplete(true)
-          }
-        }}
           onChangeText={onChangeText}
           onSubmitEditing={onSubmit}
+          onFocus={onFocus}
+          keyboardAppearance={t.scheme}
+          selectTextOnFocus={isNative}
           autoFocus={false}
           accessibilityRole="search"
-        accessibilityLabel={_(msg`Search`)}
-        accessibilityHint=""
           autoCorrect={false}
           autoComplete="off"
           autoCapitalize="none"
         />
+      </TextField.Root>
+
       {showAutocomplete && searchText.length > 0 && (
-        <Pressable
+        <View
+          style={[
+            a.absolute,
+            a.z_10,
+            a.my_auto,
+            a.inset_0,
+            a.justify_center,
+            a.pr_sm,
+            {left: 'auto'},
+          ]}>
+          <Button
             testID="searchTextInputClearBtn"
             onPress={onPressClearQuery}
-          accessibilityRole="button"
+            label={_(msg`Clear search query`)}
-          accessibilityLabel={_(msg`Clear search query`)}
+            hitSlop={HITSLOP_10}
-          accessibilityHint=""
+            size="tiny"
-          hitSlop={HITSLOP_10}>
+            shape="round"
-          <FontAwesomeIcon
+            variant="ghost"
-            icon="xmark"
+            color="secondary">
-            size={16}
+            <ButtonIcon icon={X} size="sm" />
-            style={pal.textLight as FontAwesomeIconStyle}
+          </Button>
-          />
+        </View>
-        </Pressable>
       )}
-    </Pressable>
+    </View>
   )
 }
 SearchInputBox = React.memo(SearchInputBox)
@@ -1029,21 +1229,7 @@ function scrollToTopWeb() {
   }
 }
 
-const HEADER_HEIGHT = 46
-
 const styles = StyleSheet.create({
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    paddingLeft: 13,
-    paddingVertical: 4,
-    height: HEADER_HEIGHT,
-    // @ts-ignore web only
-    position: isWeb ? 'sticky' : '',
-    top: 0,
-    zIndex: 1,
-  },
   headerMenuBtn: {
     width: 30,
     height: 30,
@@ -1075,12 +1261,6 @@ const styles = StyleSheet.create({
     zIndex: -1,
     elevation: -1, // For Android
   },
-  tabBarContainer: {
-    // @ts-ignore web only
-    position: isWeb ? 'sticky' : '',
-    top: isWeb ? HEADER_HEIGHT : 0,
-    zIndex: 1,
-  },
   searchHistoryContainer: {
     width: '100%',
     paddingHorizontal: 12,

src/view/screens/Storybook/Forms.tsx

@@ -32,7 +32,7 @@ export function Forms() {
           label="Text field"
         />
 
-        <View style={[a.flex_row, a.gap_sm]}>
+        <View style={[a.flex_row, a.align_start, a.gap_sm]}>
           <View
             style={[
               {