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>
+  )
+}

src/view/shell/desktop/Search.tsx

@@ -1,4 +1,4 @@
-import {memo, useDeferredValue, useRef, useState} from 'react'
+import {useDeferredValue, useRef, useState} from 'react'
 import {
   ActivityIndicator,
   type StyleProp,
@@ -9,7 +9,6 @@ import {
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {StackActions, useNavigation} from '@react-navigation/native'
-import type React from 'react'
 
 import {type NavigationProp} from '#/lib/routes/types'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
@@ -21,7 +20,7 @@ import {MagnifyingGlass2_Stroke2_Corner0_Rounded as SearchIcon} from '#/componen
 import {Link, type LinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
-let SearchLinkCard = ({
+function SearchLinkCard({
   label,
   to,
   style,
@@ -29,7 +28,7 @@ let SearchLinkCard = ({
   label: string
   to: LinkProps['to']
   style?: StyleProp<ViewStyle>
-}): React.ReactNode => {
+}) {
   const t = useTheme()
 
   return (
@@ -50,8 +49,6 @@ let SearchLinkCard = ({
     </Link>
   )
 }
-SearchLinkCard = memo(SearchLinkCard)
-export {SearchLinkCard}
 
 export function DesktopSearch() {
   const {_} = useLingui()