acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Integrate Sift into desktop search

Browse Source
This commit is contained in:
Eric Bailey
2026-04-07 13:21:38 -05:00
parent 1ac23b5781
commit bd0808a077
10 changed files with 271 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Autocomplete/Autocomplete.tsx
+21 -2
View File
@@ -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 -3
View File
@@ -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
+9 -1
View File
@@ -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
+49
View File
@@ -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
View File
@@ -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
+12
View File
@@ -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.ts → src/components/Autocomplete/useAutocomplete/index.ts
+25 -9
View File
@@ -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
+6 -6
View File
@@ -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]) {
activeFacet.replace(data[0].value, {noTrailingSpace: true})
if (items?.[0]) {
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
+60 -2
View File
@@ -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
+87 -145
View File
@@ -1,166 +1,108 @@
import {memo, useCallback, useState} from 'react'
import {
ActivityIndicator,
StyleSheet,
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 {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')
export function DesktopSearch() {
const navigation = useNavigation<NavigationProp>()
const [active, setActive] = useState(false)
const [query, setQuery] = useState<string>('')
const showResults = active && !!query.length
const inner = (
<View
style={[pal.border, {paddingVertical: 16, paddingHorizontal: 12}, style]}>
<Text type="md" style={[pal.text]}>
{label}
</Text>
</View>
)
const sift = useSift({
offset: a.p_sm.padding,
placement: 'bottom',
})
if (onPress) {
return (
<TouchableOpacity
onPress={onPress}
accessibilityLabel={label}
accessibilityHint="">
{inner}
</TouchableOpacity>
)
const onFocus = () => {
if (query.length) setActive(true)
}
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 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 [query, setQuery] = useState<string>('')
const {data: autocompleteData, isFetching} = useActorAutocompleteQuery(
query,
true,
)
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 (!query.length) return
navigation.dispatch(StackActions.push('Search', {q: query}))
}, [query, navigation])
const onSearchProfileCardPress = useCallback(() => {
setQuery('')
setIsActive(false)
}, [])
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 && (
<View
style={[
pal.view,
pal.borderDark,
styles.resultsContainer,
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>
{showResults && (
<Inner
query={query}
sift={sift}
onSelect={onSelect}
onDismiss={() => setActive(false)}
/>
)}
</View>
)
}
const styles = StyleSheet.create({
container: {
position: 'relative',
width: '100%',
},
resultsContainer: {
marginTop: 10,
flexDirection: 'column',
width: '100%',
borderWidth: 1,
borderRadius: 6,
},
})
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
}