New rich text composer + autocomplete (#10159)

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -3,11 +3,13 @@ import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
 
 import {HITSLOP_10} from '#/lib/constants'
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useHaptics} from '#/lib/haptics'
 import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform'
+import {type NavigationProp} from '#/lib/routes/types'
 import {emitSoftReset} from '#/state/events'
 import {useSession} from '#/state/session'
 import {useShellLayout} from '#/state/shell/shell-layout'
@@ -17,7 +19,7 @@ import {ButtonIcon} from '#/components/Button'
 import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
 import * as Layout from '#/components/Layout'
 import {Link} from '#/components/Link'
-import {IS_LIQUID_GLASS} from '#/env'
+import {IS_DEV, IS_LIQUID_GLASS} from '#/env'
 
 export function HomeHeaderLayoutMobile({
   children,
@@ -32,6 +34,7 @@ export function HomeHeaderLayoutMobile({
   const headerMinimalShellTransform = useMinimalShellHeaderTransform()
   const {hasSession} = useSession()
   const playHaptic = useHaptics()
+  const {navigate} = useNavigation<NavigationProp>()
 
   return (
     <Animated.View
@@ -59,8 +62,12 @@ export function HomeHeaderLayoutMobile({
           <PressableScale
             targetScale={0.9}
             onPress={() => {
-              playHaptic('Light')
-              emitSoftReset()
+              if (IS_DEV) {
+                navigate('Debug')
+              } else {
+                playHaptic('Light')
+                emitSoftReset()
+              }
             }}>
             <Logo width={30} />
           </PressableScale>

src/view/screens/Storybook/Forms.tsx

@@ -3,8 +3,9 @@ import {type TextInput, View} from 'react-native'
 
 import {APP_LANGUAGES} from '#/lib/../locale/languages'
 import {type CountryCode} from '#/lib/international-telephone-codes'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
+import {AutosizedTextarea} from '#/components/forms/AutosizedTextarea'
 import {DateField, LabelText} from '#/components/forms/DateField'
 import * as SegmentedControl from '#/components/forms/SegmentedControl'
 import * as TextField from '#/components/forms/TextField'
@@ -16,6 +17,7 @@ import * as Select from '#/components/Select'
 import {H1, H3} from '#/components/Typography'
 
 export function Forms() {
+  const t = useTheme()
   const [toggleGroupAValues, setToggleGroupAValues] = useState(['a'])
   const [toggleGroupBValues, setToggleGroupBValues] = useState(['a', 'b'])
   const [toggleGroupCValues, setToggleGroupCValues] = useState(['a', 'b'])
@@ -36,6 +38,44 @@ export function Forms() {
     <View style={[a.gap_4xl, a.align_start]}>
       <H1>Forms</H1>
 
+      <View style={[a.gap_md, a.align_start, a.w_full]}>
+        <AutosizedTextarea
+          label="minRows=1 maxRows=5"
+          style={[
+            a.w_full,
+            a.p_md,
+            a.rounded_sm,
+            a.border,
+            t.atoms.border_contrast_medium,
+          ]}
+          maxRows={5}
+        />
+        <AutosizedTextarea
+          label="defaultValue minRows=1 maxRows=2"
+          style={[
+            a.w_full,
+            a.p_md,
+            a.rounded_sm,
+            a.border,
+            t.atoms.border_contrast_medium,
+          ]}
+          maxRows={2}
+          defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies lacinia, nunc nisl aliquam nisl, eget aliquam nunc nisl eget nunc."
+        />
+        <AutosizedTextarea
+          label="minRows=3 maxRows=10"
+          style={[
+            a.w_full,
+            a.p_md,
+            a.rounded_sm,
+            a.border,
+            t.atoms.border_contrast_medium,
+          ]}
+          minRows={3}
+          maxRows={10}
+        />
+      </View>
+
       <Select.Root value={lang} onValueChange={setLang}>
         <Select.Trigger label="Select app language">
           <Select.ValueText />

src/view/shell/desktop/Search.tsx

@@ -1,157 +1,109 @@
-import {memo, useCallback, useState} from 'react'
-import {
-  type StyleProp,
-  TouchableOpacity,
-  View,
-  type ViewStyle,
-} from 'react-native'
-import {useLingui} from '@lingui/react/macro'
+import {useState} from 'react'
+import {View} from 'react-native'
+import {useSift} from '@bsky.app/sift'
 import {StackActions, useNavigation} from '@react-navigation/native'
 
 import {type NavigationProp} from '#/lib/routes/types'
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
-import {SearchProfileCard} from '#/screens/Search/components/SearchProfileCard'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
+import {
+  Autocomplete as AutocompleteBase,
+  type AutocompleteItem,
+  useAutocomplete,
+} from '#/components/Autocomplete'
 import {SearchInput} from '#/components/forms/SearchInput'
-import {Link} from '#/components/Link'
-import {Loader} from '#/components/Loader'
-import {Text} from '#/components/Typography'
 
-const WHITESPACE_RE = /\s+/gu
+export function DesktopSearch() {
+  const navigation = useNavigation<NavigationProp>()
+  const [active, setActive] = useState(false)
+  const [query, setQuery] = useState<string>('')
+  const showResults = active && !!query.length
 
-let SearchLinkCard = ({
-  label,
-  to,
-  onPress,
-  style,
-}: {
-  label: string
-  to?: string
-  onPress?: () => void
-  style?: StyleProp<ViewStyle>
-}): React.ReactNode => {
-  const t = useTheme()
+  const sift = useSift({
+    offset: a.p_sm.padding,
+    placement: 'bottom',
+  })
 
-  const inner = (
-    <View style={[a.py_lg, a.px_md, t.atoms.border_contrast_low, style]}>
-      <Text style={[a.text_md, t.atoms.text]}>{label}</Text>
-    </View>
-  )
+  const onFocus = () => {
+    if (query.length) setActive(true)
+  }
 
-  if (onPress || !to) {
-    return (
-      <TouchableOpacity
-        onPress={onPress}
-        accessibilityLabel={label}
-        accessibilityHint="">
-        {inner}
-      </TouchableOpacity>
-    )
+  const onChangeText = (text: string) => {
+    setQuery(text)
+    if (!active) {
+      setActive(true)
+    }
+  }
+
+  const onClearText = () => {
+    setQuery('')
+    setActive(false)
+  }
+
+  const onSubmit = () => {
+    if (!query.length) return
+    onClearText()
+    sift.elements.input.blur()
+    navigation.dispatch(StackActions.push('Search', {q: query}))
+  }
+
+  const onSelect = (item: AutocompleteItem) => {
+    if (item.type === 'profile') {
+      onClearText()
+      sift.elements.input.blur()
+      navigation.navigate('Profile', {name: item.profile.handle})
+    } else if (item.type === 'search') {
+      onClearText()
+      sift.elements.input.blur()
+      navigation.navigate('Search', {q: item.value})
+    }
   }
 
   return (
-    <Link
-      label={label}
-      to={to}
-      style={[a.py_lg, a.px_md, t.atoms.border_contrast_low, style]}
-      hoverStyle={[t.atoms.bg_contrast_25]}>
-      <Text style={[a.text_md, t.atoms.text]}>{label}</Text>
-    </Link>
-  )
-}
-SearchLinkCard = memo(SearchLinkCard)
-export {SearchLinkCard}
-
-export function DesktopSearch() {
-  const t = useTheme()
-  const {t: l} = useLingui()
-  const navigation = useNavigation<NavigationProp>()
-  const [isActive, setIsActive] = useState<boolean>(false)
-  const [query, setQuery] = useState<string>('')
-  const {data: autocompleteData, isFetching} = useActorAutocompleteQuery(
-    query,
-    true,
-  )
-  const tQuery = query.replace(WHITESPACE_RE, ' ').trim()
-
-  const moderationOpts = useModerationOpts()
-
-  const onChangeText = useCallback((text: string) => {
-    setQuery(text)
-    setIsActive(text.length > 0)
-  }, [])
-
-  const onPressCancelSearch = useCallback(() => {
-    setQuery('')
-    setIsActive(false)
-  }, [setQuery])
-
-  const onSubmit = useCallback(() => {
-    setIsActive(false)
-    if (!tQuery.length) return
-    navigation.dispatch(StackActions.push('Search', {q: tQuery}))
-  }, [tQuery, navigation])
-
-  const onSearchProfileCardPress = useCallback(() => {
-    setQuery('')
-    setIsActive(false)
-  }, [])
-
-  return (
-    <View style={[a.relative, a.w_full, a.z_10, t.atoms.bg]}>
+    <View collapsable={false} ref={sift.refs.setAnchor}>
       <SearchInput
+        hotkey
         value={query}
+        onFocus={onFocus}
         onChangeText={onChangeText}
-        onClearText={onPressCancelSearch}
+        onClearText={onClearText}
         onSubmitEditing={onSubmit}
-        hotkey={true}
+        {...sift.targetProps}
       />
-      {tQuery !== '' && isActive && moderationOpts && (
-        <View
-          style={[
-            a.mt_sm,
-            a.flex_col,
-            a.w_full,
-            a.border,
-            a.rounded_sm,
-            a.zoom_fade_in,
-            t.atoms.bg,
-            t.atoms.shadow_sm,
-            t.atoms.border_contrast_low,
-            {
-              overflow: 'hidden',
-              position: 'absolute',
-              top: '100%',
-            },
-          ]}>
-          <SearchLinkCard
-            label={l`Search for “${tQuery}”`}
-            to={`/search?q=${encodeURIComponent(tQuery)}`}
-            style={(autocompleteData?.length ?? 0) > 0 ? a.border_b : undefined}
-          />
-          {isFetching && !autocompleteData?.length ? (
-            <View
-              style={[
-                a.py_lg,
-                a.align_center,
-                a.border_t,
-                t.atoms.border_contrast_low,
-              ]}>
-              <Loader size="lg" />
-            </View>
-          ) : (
-            autocompleteData?.map(item => (
-              <SearchProfileCard
-                key={item.did}
-                profile={item}
-                moderationOpts={moderationOpts}
-                onPress={onSearchProfileCardPress}
-              />
-            ))
-          )}
-        </View>
+      {showResults && (
+        <Inner
+          query={query}
+          sift={sift}
+          onSelect={onSelect}
+          onDismiss={() => setActive(false)}
+        />
       )}
     </View>
   )
 }
+
+function Inner({
+  query,
+  sift,
+  onSelect,
+  onDismiss,
+}: {
+  query: string
+  sift: ReturnType<typeof useSift>
+  onSelect: (item: AutocompleteItem) => void
+  onDismiss: () => void
+}) {
+  const {items} = useAutocomplete({
+    type: 'profile',
+    query,
+    showSearchFallback: true,
+  })
+
+  return items && items.length ? (
+    <AutocompleteBase
+      sift={sift}
+      data={items}
+      onSelect={onSelect}
+      onDismiss={onDismiss}
+    />
+  ) : null
+}