fix type error, extract and plat-split a component

src/screens/Search/components/AutocompleteResults.tsx

@@ -5,11 +5,10 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {SearchLinkCard} from '#/view/shell/desktop/Search'
 import {SearchProfileCard} from '#/screens/Search/components/SearchProfileCard'
-import {atoms as a, native} from '#/alf'
+import {atoms as a} from '#/alf'
 import * as Layout from '#/components/Layout'
-import {IS_NATIVE} from '#/env'
+import {SearchLinkCard} from './SearchLinkCard'
 
 let AutocompleteResults = ({
   isAutocompleteFetching,
@@ -43,12 +42,8 @@ let AutocompleteResults = ({
           keyboardDismissMode="on-drag">
           <SearchLinkCard
             label={_(msg`Search for "${searchText}"`)}
-            onPress={native(onSubmit)}
-            to={
-              IS_NATIVE
-                ? undefined
-                : `/search?q=${encodeURIComponent(searchText)}`
-            }
+            onPress={onSubmit}
+            to={{screen: 'Search', params: {q: searchText}}}
             style={a.border_b}
           />
           {autocompleteData?.map(item => (

src/screens/Search/components/SearchLinkCard.native.tsx

@@ -0,0 +1,42 @@
+import {type StyleProp, View, type ViewStyle} from 'react-native'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
+import {type LinkProps} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+export function SearchLinkCard({
+  label,
+  onPress,
+  style,
+}: {
+  label: string
+  /**
+   * @platform web
+   */
+  to: LinkProps['to']
+  /**
+   * @platform native
+   */
+  onPress: () => void
+  style?: StyleProp<ViewStyle>
+}) {
+  const t = useTheme()
+
+  return (
+    <Button label={label} onPress={onPress}>
+      {({focused, hovered, pressed}) => (
+        <View
+          style={[
+            a.w_full,
+            t.atoms.border_contrast_low,
+            a.p_lg,
+            (focused || hovered || pressed) && t.atoms.bg_contrast_25,
+            style,
+          ]}>
+          <Text style={[a.text_sm, a.leading_snug]}>{label}</Text>
+        </View>
+      )}
+    </Button>
+  )
+}

src/screens/Search/components/SearchLinkCard.tsx

@@ -0,0 +1,42 @@
+import {type StyleProp, View, type ViewStyle} from 'react-native'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Link, type LinkProps} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+export function SearchLinkCard({
+  label,
+  to,
+  style,
+}: {
+  label: string
+  /**
+   * @platform web
+   */
+  to: LinkProps['to']
+  /**
+   * @platform native
+   */
+  onPress: () => void
+  style?: StyleProp<ViewStyle>
+}) {
+  const t = useTheme()
+
+  return (
+    <Link to={to} label={label}>
+      {({focused, hovered, pressed}) => (
+        <View
+          style={[
+            a.w_full,
+            t.atoms.border_contrast_low,
+            a.py_lg,
+            a.px_md,
+            (focused || hovered || pressed) && t.atoms.bg_contrast_25,
+            style,
+          ]}>
+          <Text style={[a.text_sm, a.leading_snug]}>{label}</Text>
+        </View>
+      )}
+    </Link>
+  )
+}