diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index f2b67424..612eb5cc 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -42,7 +42,11 @@ import {useSetDrawerOpen} from '#/state/shell' import {useAnalytics} from '#/lib/analytics/analytics' import {MagnifyingGlassIcon} from '#/lib/icons' import {useModerationOpts} from '#/state/queries/preferences' -import {SearchResultCard} from '#/view/shell/desktop/Search' +import { + MATCH_HANDLE, + SearchLinkCard, + SearchProfileCard, +} from '#/view/shell/desktop/Search' import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell' import {isWeb} from '#/platform/detection' import {listenSoftReset} from '#/state/events' @@ -509,6 +513,11 @@ export function SearchScreen( onPressCancelSearch() }, [onPressCancelSearch]) + const queryMaybeHandle = React.useMemo(() => { + const match = MATCH_HANDLE.exec(query) + return match && match[1] + }, [query]) + useFocusEffect( React.useCallback(() => { setMinimalShellMode(false) @@ -615,18 +624,26 @@ export function SearchScreen( dataSet={{stableGutters: '1'}} keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag"> - {searchResults.length ? ( - searchResults.map((item, i) => ( - - )) - ) : ( - - )} + + + {queryMaybeHandle ? ( + + ) : null} + + {searchResults.map(item => ( + + ))} diff --git a/src/view/shell/desktop/Search.tsx b/src/view/shell/desktop/Search.tsx index df49da55..c24940b5 100644 --- a/src/view/shell/desktop/Search.tsx +++ b/src/view/shell/desktop/Search.tsx @@ -29,13 +29,41 @@ import {UserAvatar} from '#/view/com/util/UserAvatar' import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' import {useModerationOpts} from '#/state/queries/preferences' -export function SearchResultCard({ - profile, +export const MATCH_HANDLE = + /@?([a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*(?:\.[a-zA-Z]{2,}))/ + +export function SearchLinkCard({ + label, + to, style, +}: { + label: string + to: string + style?: ViewStyle +}) { + const pal = usePalette('default') + + return ( + + + + {label} + + + + ) +} + +export function SearchProfileCard({ + profile, moderation, }: { profile: AppBskyActorDefs.ProfileViewBasic - style: ViewStyle moderation: ProfileModeration }) { const pal = usePalette('default') @@ -50,9 +78,7 @@ export function SearchResultCard({ { + const match = MATCH_HANDLE.exec(query) + return match && match[1] + }, [query]) + return ( ) : ( <> - {searchResults.length ? ( - searchResults.map((item, i) => ( - - )) - ) : ( - - - No results found for {query} - - - )} + + + {queryMaybeHandle ? ( + + ) : null} + + {searchResults.map(item => ( + + ))} )}