feat: better autocomplete view

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'
@@ -511,6 +515,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)
@@ -617,18 +626,26 @@ export function SearchScreen(
               dataSet={{stableGutters: '1'}}
               keyboardShouldPersistTaps="handled"
               keyboardDismissMode="on-drag">
-              {searchResults.length ? (
+              <SearchLinkCard
-                searchResults.map((item, i) => (
+                label={_(msg`Search for "${query}"`)}
-                  <SearchResultCard
+                to={`/search?q=${encodeURIComponent(query)}`}
-                    key={item.did}
+                style={{borderBottomWidth: 1}}
-                    profile={item}
+              />
-                    moderation={moderateProfile(item, moderationOpts)}
+
-                    style={i === 0 ? {borderTopWidth: 0} : {}}
+              {queryMaybeHandle ? (
-                  />
+                <SearchLinkCard
-                ))
+                  label={_(msg`Go to @${queryMaybeHandle}`)}
-              ) : (
+                  to={`/profile/${queryMaybeHandle}`}
-                <EmptyState message={_(msg`No results found for ${query}`)} />
+                />
-              )}
+              ) : null}
+
+              {searchResults.map(item => (
+                <SearchProfileCard
+                  key={item.did}
+                  profile={item}
+                  moderation={moderateProfile(item, moderationOpts)}
+                />
+              ))}
 
               <View style={{height: 200}} />
             </ScrollView>

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({
+export const MATCH_HANDLE =
-  profile,
+  /@?([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 (
+    <Link href={to} asAnchor anchorNoUnderline>
+      <View
+        style={[
+          pal.border,
+          {paddingVertical: 16, paddingHorizontal: 12},
+          style,
+        ]}>
+        <Text type="md" style={[pal.text]}>
+          {label}
+        </Text>
+      </View>
+    </Link>
+  )
+}
+
+export function SearchProfileCard({
+  profile,
   moderation,
 }: {
   profile: AppBskyActorDefs.ProfileViewBasic
-  style: ViewStyle
   moderation: ProfileModeration
 }) {
   const pal = usePalette('default')
@@ -50,9 +78,7 @@ export function SearchResultCard({
       <View
         style={[
           pal.border,
-          style,
           {
-            borderTopWidth: 1,
             flexDirection: 'row',
             alignItems: 'center',
             gap: 12,
@@ -147,6 +173,11 @@ export function DesktopSearch() {
     navigation.dispatch(StackActions.push('Search', {q: query}))
   }, [query, navigation, setSearchResults])
 
+  const queryMaybeHandle = React.useMemo(() => {
+    const match = MATCH_HANDLE.exec(query)
+    return match && match[1]
+  }, [query])
+
   return (
     <View style={[styles.container, pal.view]}>
       <View
@@ -198,22 +229,26 @@ export function DesktopSearch() {
             </View>
           ) : (
             <>
-              {searchResults.length ? (
+              <SearchLinkCard
-                searchResults.map((item, i) => (
+                label={_(msg`Search for "${query}"`)}
-                  <SearchResultCard
+                to={`/search?q=${encodeURIComponent(query)}`}
-                    key={item.did}
+                style={{borderBottomWidth: 1}}
-                    profile={item}
+              />
-                    moderation={moderateProfile(item, moderationOpts)}
+
-                    style={i === 0 ? {borderTopWidth: 0} : {}}
+              {queryMaybeHandle ? (
-                  />
+                <SearchLinkCard
-                ))
+                  label={_(msg`Go to @${queryMaybeHandle}`)}
-              ) : (
+                  to={`/profile/${queryMaybeHandle}`}
-                <View>
+                />
-                  <Text style={[pal.textLight, styles.noResults]}>
+              ) : null}
-                    <Trans>No results found for {query}</Trans>
+
-                  </Text>
+              {searchResults.map(item => (
-                </View>
+                <SearchProfileCard
-              )}
+                  key={item.did}
+                  profile={item}
+                  moderation={moderateProfile(item, moderationOpts)}
+                />
+              ))}
             </>
           )}
         </View>