Update advanced search UI (#11088)

src/screens/Search/components/AdvancedSearchDialog/ClearableDateField.tsx

@@ -41,7 +41,7 @@ export function ClearableDateField({
          */
         value={active ? value : ''}
         placeholder={l({
-          message: 'Any time',
+          message: 'Any date',
           comment: 'Placeholder text for a date picker',
         })}
         accessibilityHint={accessibilityHint}

src/screens/Search/components/AdvancedSearchDialog/FollowingDropdown.tsx

@@ -19,11 +19,10 @@ export function FollowingDropdown({
   const {t: l} = useLingui()
 
   const options: {value: FollowingFilter; label: string}[] = [
-    {value: 'everyone', label: l`Everyone`},
+    {value: 'anyone', label: l`Anyone`},
     {value: 'following', label: l`People you follow`},
   ]
-  const currentLabel =
-    options.find(o => o.value === value)?.label ?? l`Everyone`
+  const currentLabel = options.find(o => o.value === value)?.label ?? l`Anyone`
 
   return (
     <Menu.Root>

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

@@ -14,7 +14,7 @@ const emptySerializeState = {
   language: '',
   replies: 'all' as const,
   media: 'all' as const,
-  following: 'everyone' as const,
+  following: 'anyone' as const,
   dateSince: '',
   dateSinceActive: false,
   dateUntil: '',
@@ -145,10 +145,10 @@ describe(`AdvancedSearchDialog serialize/parse`, () => {
     expect(out.filters.following).toBe('true')
   })
 
-  it(`leaves the following param unset for everyone`, () => {
+  it(`leaves the following param unset for anyone`, () => {
     const out = serializeAdvancedSearch({
       ...emptySerializeState,
-      following: 'everyone',
+      following: 'anyone',
     })
     expect(out.filters.following).toBeUndefined()
   })
@@ -157,7 +157,7 @@ describe(`AdvancedSearchDialog serialize/parse`, () => {
     expect(parseAdvancedSearch('', {following: 'true'}).following).toBe(
       'following',
     )
-    expect(parseAdvancedSearch('', {}).following).toBe('everyone')
+    expect(parseAdvancedSearch('', {}).following).toBe('anyone')
   })
 
   it(`strips redundant markers from filter values on serialize`, () => {
@@ -177,7 +177,7 @@ describe(`AdvancedSearchDialog serialize/parse`, () => {
       language: '',
       replies: 'all',
       media: 'all',
-      following: 'everyone',
+      following: 'anyone',
       dateSince: '',
       dateSinceActive: false,
       dateUntil: '',

src/screens/Search/components/AdvancedSearchDialog/index.tsx

@@ -38,17 +38,18 @@ import {
 const MAX_FILTERS = 20
 
 export function AdvancedSearchDialog({
+  disabled,
   q,
   filters,
   onSubmit,
 }: {
+  disabled: boolean
   q: string
   filters: SearchFilters
   onSubmit: (q: string, filters: SearchFilters) => void
 }) {
   const ax = useAnalytics()
   const {t: l} = useLingui()
-  const t = useTheme()
   const control = Dialog.useDialogControl()
   const filtersActive = hasActiveFilters(filters)
   const stateKey = useMemo(
@@ -61,9 +62,10 @@ export function AdvancedSearchDialog({
     <>
       <View style={[a.relative]}>
         <Button
+          disabled={disabled}
           label={l`Open advanced search options`}
           size="small"
-          color="secondary"
+          color={filtersActive ? 'primary_subtle' : 'secondary'}
           style={native([a.py_sm, a.px_sm])}
           onPress={() => {
             ax.metric('search:advanced:press', {
@@ -73,25 +75,9 @@ export function AdvancedSearchDialog({
           }}>
           <ButtonIcon icon={SettingsSliderIcon} />
           <ButtonText>
-            <Trans>Advanced search</Trans>
+            <Trans context="search">Filters</Trans>
           </ButtonText>
         </Button>
-        {filtersActive && (
-          <View
-            accessible={false}
-            style={[
-              a.absolute,
-              a.rounded_full,
-              {
-                top: -2,
-                right: -2,
-                width: 10,
-                height: 10,
-                backgroundColor: t.palette.primary_500,
-              },
-            ]}
-          />
-        )}
       </View>
 
       <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
@@ -244,12 +230,12 @@ function DialogInner({
   return (
     <Dialog.ScrollableInner
       ref={scrollRef}
-      label={l`Dialog: Set advanced search options`}
+      label={l`Dialog: Set search filters`}
       contentContainerStyle={[a.px_0, a.pt_0]}
       header={
         <Dialog.Header renderLeft={cancelButton} renderRight={searchButton}>
           <Dialog.HeaderText>
-            <Trans>Advanced search</Trans>
+            <Trans context="search">Filters</Trans>
           </Dialog.HeaderText>
         </Dialog.Header>
       }>
@@ -272,22 +258,6 @@ function DialogInner({
         </View>
 
         <View style={[twoColumn ? a.flex_row : a.flex_col, a.gap_xl]}>
-          <View style={[a.flex_1]}>
-            <TextField.LabelText>
-              <Trans>This exact phrase</Trans>
-            </TextField.LabelText>
-            <ClearableInput
-              label={l`This exact phrase`}
-              defaultValue={exactPhrase}
-              placeholder={l({
-                message: 'what’s up',
-                comment: 'Advanced search: Example of an “exact phrase” search',
-              })}
-              onChangeText={setExactPhrase}
-              onSubmitEditing={handlePressSearch}
-            />
-          </View>
-
           <View style={[a.flex_1]}>
             <TextField.LabelText>
               <Trans>None of these words</Trans>
@@ -304,6 +274,22 @@ function DialogInner({
               onSubmitEditing={handlePressSearch}
             />
           </View>
+
+          <View style={[a.flex_1]}>
+            <TextField.LabelText>
+              <Trans>This exact phrase</Trans>
+            </TextField.LabelText>
+            <ClearableInput
+              label={l`This exact phrase`}
+              defaultValue={exactPhrase}
+              placeholder={l({
+                message: 'what’s up',
+                comment: 'Advanced search: Example of an “exact phrase” search',
+              })}
+              onChangeText={setExactPhrase}
+              onSubmitEditing={handlePressSearch}
+            />
+          </View>
         </View>
 
         <View>

src/screens/Search/components/AdvancedSearchDialog/utils.ts

@@ -15,9 +15,9 @@ export type MediaFilter = 'all' | 'media' | 'video'
 
 /**
  * Whether to limit results to authors the user follows. Serializes into the
- * `following` sibling param ('following' -> following:true, everyone -> unset).
+ * `following` sibling param ('following' -> following:true, anyone -> unset).
  */
-export type FollowingFilter = 'everyone' | 'following'
+export type FollowingFilter = 'anyone' | 'following'
 
 export type FilterField = 'authors' | 'mentions' | 'domains' | 'urls' | 'tags'
 
@@ -260,7 +260,7 @@ export function parseAdvancedSearch(
     language: lang,
     replies,
     media,
-    following: filters.following === 'true' ? 'following' : 'everyone',
+    following: filters.following === 'true' ? 'following' : 'anyone',
     since: since && isValidDate(since) ? since : '',
     until: until && isValidDate(until) ? until : '',
     filters: filterRows,