Integrate Sift into desktop search

src/components/Autocomplete/Autocomplete.tsx

@@ -1,4 +1,5 @@
 import {useCallback} from 'react'
+import {View} from 'react-native'
 import {Sift, type UseSiftReturn} from '@bsky.app/sift'
 
 import {atoms as a, useTheme} from '#/alf'
@@ -6,17 +7,35 @@ import {type AutocompleteItem} from '#/components/Autocomplete/types'
 import {useOnKeyboard} from '#/components/hooks/useOnKeyboard'
 import {Portal} from '#/components/Portal'
 import {IS_WEB} from '#/env'
+import {AutocompleteItemEmoji} from './AutocompleteItemEmoji'
+import {AutocompleteItemProfile} from './AutocompleteItemProfile'
+import {AutocompleteItemSearch} from './AutocompleteItemSearch'
+
+function renderItem(
+  item: Parameters<Parameters<typeof Sift<AutocompleteItem>>[0]['render']>[0],
+) {
+  switch (item.item.type) {
+    case 'profile':
+      return <AutocompleteItemProfile {...item} />
+    case 'emoji':
+      return <AutocompleteItemEmoji {...item} />
+    case 'search':
+      return <AutocompleteItemSearch {...item} />
+    default:
+      return <View />
+  }
+}
 
 export function Autocomplete({
   sift,
   data,
-  render,
+  render = renderItem,
   onSelect,
   onDismiss,
 }: {
   sift: UseSiftReturn
   data: AutocompleteItem[]
-  render: Parameters<typeof Sift<AutocompleteItem>>[0]['render']
+  render?: Parameters<typeof Sift<AutocompleteItem>>[0]['render']
   onSelect: (item: AutocompleteItem) => void
   onDismiss: () => void
 }) {

src/components/Autocomplete/AutocompleteItemEmoji.tsx

@@ -1,6 +1,5 @@
 import {SiftItem} from '@bsky.app/sift'
 
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 import {type AutocompleteItemProps} from './types'
@@ -11,9 +10,8 @@ export function AutocompleteItemEmoji({
   item,
 }: AutocompleteItemProps) {
   const t = useTheme()
-  const moderationOpts = useModerationOpts()
 
-  if (item.type !== 'emoji' || !moderationOpts) return null
+  if (item.type !== 'emoji') return null
 
   return (
     <SiftItem

src/components/Autocomplete/AutocompleteItemProfile.tsx

@@ -7,6 +7,8 @@ import {type AutocompleteItemProps} from './types'
 
 export function AutocompleteItemProfile({
   active,
+  isFirst,
+  isLast,
   props,
   item,
 }: AutocompleteItemProps) {
@@ -19,9 +21,15 @@ export function AutocompleteItemProfile({
     <SiftItem
       {...props}
       style={s => [
-        a.px_md,
         a.py_sm,
+        a.px_md,
         active || s.hovered || s.pressed ? [t.atoms.bg_contrast_25] : [],
+        isFirst && {
+          paddingTop: a.py_sm.paddingTop * 1.2,
+        },
+        isLast && {
+          paddingBottom: a.py_sm.paddingTop * 1.2,
+        },
       ]}>
       <ProfileCard.Header>
         <ProfileCard.Avatar

src/components/Autocomplete/AutocompleteItemSearch.tsx

@@ -0,0 +1,49 @@
+import {View} from 'react-native'
+import {SiftItem} from '@bsky.app/sift'
+
+import {atoms as a, useTheme} from '#/alf'
+import {MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/components/icons/MagnifyingGlass'
+import {Text} from '#/components/Typography'
+import {type AutocompleteItemProps} from './types'
+
+export function AutocompleteItemSearch({
+  active,
+  isFirst,
+  isLast,
+  props,
+  item,
+}: AutocompleteItemProps) {
+  const t = useTheme()
+
+  if (item.type !== 'search') return null
+
+  return (
+    <SiftItem
+      {...props}
+      style={s => [
+        a.py_sm,
+        a.px_md,
+        a.flex_row,
+        a.align_center,
+        a.gap_sm,
+        active || s.hovered || s.pressed ? [t.atoms.bg_contrast_25] : [],
+        isFirst && {
+          paddingTop: a.py_sm.paddingTop * 1.2,
+        },
+        isLast && {
+          paddingBottom: a.py_sm.paddingTop * 1.2,
+        },
+      ]}>
+      <View
+        style={[
+          a.align_center,
+          {
+            width: 40,
+          },
+        ]}>
+        <MagnifyingGlassIcon fill={t.atoms.text_contrast_low.color} size="xl" />
+      </View>
+      <Text style={[a.text_md, a.leading_snug]}>{item.value}</Text>
+    </SiftItem>
+  )
+}

src/components/Autocomplete/index.tsx

@@ -1,5 +1,6 @@
 export * from './Autocomplete'
 export * from './AutocompleteItemEmoji'
 export * from './AutocompleteItemProfile'
+export * from './types'
 export * from './useAutocomplete'
 export * from './util'

src/components/Autocomplete/types.ts

@@ -24,13 +24,25 @@ export type AutocompleteEmoji = {
   emoji: Emoji
 }
 
+export type AutocompleteSearch = {
+  key: string
+  type: 'search'
+  value: string
+}
+
 export type AutocompleteItem =
   | AutocompleteProfile
   | AutocompleteTag
   | AutocompleteEmoji
+  | AutocompleteSearch
 
 export type AutocompleteItemType = AutocompleteItem['type']
 
 export type AutocompleteItemProps = Parameters<
   Parameters<typeof Sift<AutocompleteItem>>[0]['render']
 >[0]
+
+export type AutocompleteApi = {
+  query: string
+  items: AutocompleteItem[]
+}

src/components/Autocomplete/useAutocomplete/index.ts

@@ -11,6 +11,7 @@ import {STALE} from '#/state/queries'
 import {DEFAULT_LOGGED_OUT_PREFERENCES} from '#/state/queries/preferences'
 import {useAgent} from '#/state/session'
 import {
+  type AutocompleteApi,
   type AutocompleteItem,
   type AutocompleteItemType,
   type AutocompleteProfile,
@@ -47,24 +48,26 @@ function useEmojiSearch() {
 
 export function useAutocomplete({
   type,
-  query,
+  query: q,
   limit,
+  showSearchFallback = false,
 }: {
   type: AutocompleteItemType
   query: string
   limit?: number
-}) {
+  showSearchFallback?: boolean
+}): AutocompleteApi {
   const agent = useAgent()
   const moderationOpts = useModerationOpts()
   const emojiSearch = useEmojiSearch()
 
-  return useQuery({
+  const query = useQuery({
     staleTime: STALE.MINUTES.ONE,
     queryKey: [
       'autocomplete',
       {
         type,
-        query,
+        query: q,
       },
     ],
     async queryFn() {
@@ -73,10 +76,10 @@ export function useAutocomplete({
         if (!query) return []
 
         // Going from "foo" to "foo." should not clear matches.
-        query = query.toLowerCase().trim().replace(/\.$/, '')
+        q = q.toLowerCase().trim().replace(/\.$/, '')
 
         const res = await agent.searchActorsTypeahead({
-          q: query,
+          q,
           limit: limit || 8,
         })
 
@@ -87,7 +90,7 @@ export function useAutocomplete({
           profile,
         }))
       } else if (type === 'emoji') {
-        const results = await emojiSearch(query, limit || 8)
+        const results = await emojiSearch(q, limit || 8)
         return results.map(result => ({
           key: result.item.id,
           type: 'emoji' as const,
@@ -109,7 +112,7 @@ export function useAutocomplete({
 
           if (item.type === 'profile') {
             const moderated = moderateProfileItem({
-              query,
+              query: q,
               item,
               moderationOpts: moderationOpts || DEFAULT_MOD_OPTS,
             })
@@ -119,12 +122,25 @@ export function useAutocomplete({
           }
         }
 
+        if (showSearchFallback && q) {
+          results.unshift({
+            key: `search-${q}`,
+            type: 'search' as const,
+            value: q,
+          })
+        }
+
         return results
       },
-      [query, moderationOpts],
+      [q, showSearchFallback, moderationOpts],
     ),
     placeholderData: keepPreviousData,
   })
+
+  return {
+    query: q,
+    items: query.data || [],
+  }
 }
 
 function moderateProfileItem({

src/components/Composer/index.tsx

@@ -403,7 +403,7 @@ function AutocompleteInner({
   activeFacet: TapperActiveFacet
   onDismiss: () => void
 }) {
-  const {data} = useAutocomplete({
+  const {items} = useAutocomplete({
     type: parseAutocompleteItemType(activeFacet.type),
     query: activeFacet.value,
   })
@@ -417,17 +417,17 @@ function AutocompleteInner({
 
   useEffect(() => {
     if (activeFacet?.type === 'emoji' && activeFacet.raw.endsWith(':')) {
-      if (data?.[0]) {
+      if (items?.[0]) {
-        activeFacet.replace(data[0].value, {noTrailingSpace: true})
+        activeFacet.replace(items[0].value, {noTrailingSpace: true})
         onDismiss()
       }
     }
-  }, [data, activeFacet])
+  }, [items, activeFacet])
 
-  return data && data.length ? (
+  return items && items.length ? (
     <AutocompleteBase
       sift={sift}
-      data={data}
+      data={items}
       render={props => {
         if (props.item.type === 'profile') {
           return <AutocompleteItemProfile {...props} />

src/screens/Search/components/AutocompleteResults.tsx

@@ -1,11 +1,18 @@
 import {memo} from 'react'
-import {ActivityIndicator, View} from 'react-native'
+import {
+  ActivityIndicator,
+  TouchableOpacity,
+  View,
+  type ViewStyle,
+} from 'react-native'
 import {type AppBskyActorDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
+import {usePalette} from '#/lib/hooks/usePalette'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {SearchLinkCard} from '#/view/shell/desktop/Search'
+import {Link} from '#/view/com/util/Link'
+import {Text} from '#/view/com/util/text/Text'
 import {SearchProfileCard} from '#/screens/Search/components/SearchProfileCard'
 import {atoms as a, native} from '#/alf'
 import * as Layout from '#/components/Layout'
@@ -76,3 +83,54 @@ let AutocompleteResults = ({
 }
 AutocompleteResults = memo(AutocompleteResults)
 export {AutocompleteResults}
+
+let SearchLinkCard = ({
+  label,
+  to,
+  onPress,
+  style,
+}: {
+  label: string
+  to?: string
+  onPress?: () => void
+  style?: ViewStyle
+}): React.ReactNode => {
+  const pal = usePalette('default')
+
+  const inner = (
+    <View
+      style={[pal.border, {paddingVertical: 16, paddingHorizontal: 12}, style]}>
+      <Text type="md" style={[pal.text]}>
+        {label}
+      </Text>
+    </View>
+  )
+
+  if (onPress) {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        accessibilityLabel={label}
+        accessibilityHint="">
+        {inner}
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <Link href={to} asAnchor anchorNoUnderline>
+      <View
+        style={[
+          pal.border,
+          {paddingVertical: 16, paddingHorizontal: 12},
+          style,
+        ]}>
+        <Text type="md" style={[pal.text]}>
+          {label}
+        </Text>
+      </View>
+    </Link>
+  )
+}
+SearchLinkCard = memo(SearchLinkCard)
+export {SearchLinkCard}

src/view/shell/desktop/Search.tsx

@@ -1,166 +1,108 @@
-import {memo, useCallback, useState} from 'react'
+import {useState} from 'react'
-import {
+import {View} from 'react-native'
-  ActivityIndicator,
+import {useSift} from '@bsky.app/sift'
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  type ViewStyle,
-} from 'react-native'
-import {useLingui} from '@lingui/react/macro'
 import {StackActions, useNavigation} from '@react-navigation/native'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {type NavigationProp} from '#/lib/routes/types'
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
-import {Link} from '#/view/com/util/Link'
-import {Text} from '#/view/com/util/text/Text'
-import {SearchProfileCard} from '#/screens/Search/components/SearchProfileCard'
 import {atoms as a} from '#/alf'
+import {
+  Autocomplete as AutocompleteBase,
+  type AutocompleteItem,
+  useAutocomplete,
+} from '#/components/Autocomplete'
 import {SearchInput} from '#/components/forms/SearchInput'
 
-let SearchLinkCard = ({
-  label,
-  to,
-  onPress,
-  style,
-}: {
-  label: string
-  to?: string
-  onPress?: () => void
-  style?: ViewStyle
-}): React.ReactNode => {
-  const pal = usePalette('default')
-
-  const inner = (
-    <View
-      style={[pal.border, {paddingVertical: 16, paddingHorizontal: 12}, style]}>
-      <Text type="md" style={[pal.text]}>
-        {label}
-      </Text>
-    </View>
-  )
-
-  if (onPress) {
-    return (
-      <TouchableOpacity
-        onPress={onPress}
-        accessibilityLabel={label}
-        accessibilityHint="">
-        {inner}
-      </TouchableOpacity>
-    )
-  }
-
-  return (
-    <Link href={to} asAnchor anchorNoUnderline>
-      <View
-        style={[
-          pal.border,
-          {paddingVertical: 16, paddingHorizontal: 12},
-          style,
-        ]}>
-        <Text type="md" style={[pal.text]}>
-          {label}
-        </Text>
-      </View>
-    </Link>
-  )
-}
-SearchLinkCard = memo(SearchLinkCard)
-export {SearchLinkCard}
-
 export function DesktopSearch() {
-  const {t: l} = useLingui()
-  const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
-  const [isActive, setIsActive] = useState<boolean>(false)
+  const [active, setActive] = useState(false)
   const [query, setQuery] = useState<string>('')
-  const {data: autocompleteData, isFetching} = useActorAutocompleteQuery(
+  const showResults = active && !!query.length
-    query,
-    true,
-  )
 
-  const moderationOpts = useModerationOpts()
+  const sift = useSift({
+    offset: a.p_sm.padding,
+    placement: 'bottom',
+  })
 
-  const onChangeText = useCallback((text: string) => {
+  const onFocus = () => {
+    if (query.length) setActive(true)
+  }
+
+  const onChangeText = (text: string) => {
     setQuery(text)
-    setIsActive(text.length > 0)
+    if (!active) {
-  }, [])
+      setActive(true)
+    }
+  }
 
-  const onPressCancelSearch = useCallback(() => {
+  const onClearText = () => {
     setQuery('')
-    setIsActive(false)
+    setActive(false)
-  }, [setQuery])
+  }
 
-  const onSubmit = useCallback(() => {
+  const onSubmit = () => {
-    setIsActive(false)
     if (!query.length) return
+    onClearText()
+    sift.elements.input.blur()
     navigation.dispatch(StackActions.push('Search', {q: query}))
-  }, [query, navigation])
+  }
 
-  const onSearchProfileCardPress = useCallback(() => {
+  const onSelect = (item: AutocompleteItem) => {
-    setQuery('')
+    if (item.type === 'profile') {
-    setIsActive(false)
+      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 (
-    <View style={[styles.container, pal.view]}>
+    <View collapsable={false} ref={sift.refs.setAnchor}>
       <SearchInput
         value={query}
+        onFocus={onFocus}
         onChangeText={onChangeText}
-        onClearText={onPressCancelSearch}
+        onClearText={onClearText}
         onSubmitEditing={onSubmit}
+        {...sift.targetProps}
       />
-      {query !== '' && isActive && moderationOpts && (
+      {showResults && (
-        <View
+        <Inner
-          style={[
+          query={query}
-            pal.view,
+          sift={sift}
-            pal.borderDark,
+          onSelect={onSelect}
-            styles.resultsContainer,
+          onDismiss={() => setActive(false)}
-            a.overflow_hidden,
-          ]}>
-          {isFetching && !autocompleteData?.length ? (
-            <View style={{padding: 8}}>
-              <ActivityIndicator />
-            </View>
-          ) : (
-            <>
-              <SearchLinkCard
-                label={l`Search for "${query}"`}
-                to={`/search?q=${encodeURIComponent(query)}`}
-                style={
-                  (autocompleteData?.length ?? 0) > 0
-                    ? {borderBottomWidth: 1}
-                    : undefined
-                }
         />
-              {autocompleteData?.map(item => (
-                <SearchProfileCard
-                  key={item.did}
-                  profile={item}
-                  moderationOpts={moderationOpts}
-                  onPress={onSearchProfileCardPress}
-                />
-              ))}
-            </>
-          )}
-        </View>
       )}
     </View>
   )
 }
 
-const styles = StyleSheet.create({
+function Inner({
-  container: {
+  query,
-    position: 'relative',
+  sift,
-    width: '100%',
+  onSelect,
-  },
+  onDismiss,
-  resultsContainer: {
+}: {
-    marginTop: 10,
+  query: string
-    flexDirection: 'column',
+  sift: ReturnType<typeof useSift>
-    width: '100%',
+  onSelect: (item: AutocompleteItem) => void
-    borderWidth: 1,
+  onDismiss: () => void
-    borderRadius: 6,
+}) {
-  },
+  const {items} = useAutocomplete({
+    type: 'profile',
+    query,
+    showSearchFallback: true,
   })
+
+  return items && items.length ? (
+    <AutocompleteBase
+      sift={sift}
+      data={items}
+      onSelect={onSelect}
+      onDismiss={onDismiss}
+    />
+  ) : null
+}