Add language filtering UI to search

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/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}
-          onBlur={ctx.onBlur}
+          onFocus={e => {
+            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,22 +196,23 @@ export function createInput(Component: typeof TextInput) {
             a.px_xs,
             {
               // paddingVertical doesn't work w/multiline - esb
-              paddingTop: 14,
-              paddingBottom: 14,
+              paddingTop: 12,
+              paddingBottom: 13,
               lineHeight: a.text_md.fontSize * 1.1875,
               textAlignVertical: rest.multiline ? 'top' : undefined,
               minHeight: rest.multiline ? 80 : undefined,
               minWidth: 0,
             },
             // fix for autofill styles covering border
             web({
-              paddingTop: 12,
-              paddingBottom: 12,
+              paddingTop: 10,
+              paddingBottom: 11,
               marginTop: 2,
               marginBottom: 2,
             }),
             android({
-              paddingBottom: 16,
+              paddingTop: 8,
+              paddingBottom: 8,
             }),
             style,
           ]}

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(' ')
+}