defer and ALF sidebar search

src/view/shell/desktop/Search.tsx

@@ -1,8 +1,8 @@
+import {memo, useCallback, useDeferredValue, useState} from 'react'
 import React from 'react'
 import {
   ActivityIndicator,
-  StyleSheet,
-  TouchableOpacity,
+  type StyleProp,
   View,
   type ViewStyle,
 } from 'react-native'
@@ -10,95 +10,76 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 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 {atoms as a, useTheme} from '#/alf'
 import {SearchInput} from '#/components/forms/SearchInput'
+import {Link, type LinkProps} from '#/components/Link'
+import {Text} from '#/components/Typography'
 
 let SearchLinkCard = ({
   label,
   to,
-  onPress,
   style,
 }: {
   label: string
-  to?: string
-  onPress?: () => void
-  style?: ViewStyle
+  to: LinkProps['to']
+  style?: StyleProp<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>
-    )
-  }
+  const t = useTheme()
 
   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 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>
   )
 }
-SearchLinkCard = React.memo(SearchLinkCard)
+SearchLinkCard = memo(SearchLinkCard)
 export {SearchLinkCard}
 
 export function DesktopSearch() {
   const {_} = useLingui()
-  const pal = usePalette('default')
+  const t = useTheme()
   const navigation = useNavigation<NavigationProp>()
-  const [isActive, setIsActive] = React.useState<boolean>(false)
-  const [query, setQuery] = React.useState<string>('')
+  const [isActive, setIsActive] = useState(false)
+  const [query, setQuery] = useState('')
+  const deferredQuery = useDeferredValue(query)
   const {data: autocompleteData, isFetching} = useActorAutocompleteQuery(
-    query,
+    deferredQuery,
     true,
   )
 
   const moderationOpts = useModerationOpts()
 
-  const onChangeText = React.useCallback((text: string) => {
+  const onChangeText = useCallback((text: string) => {
     setQuery(text)
     setIsActive(text.length > 0)
   }, [])
 
-  const onPressCancelSearch = React.useCallback(() => {
+  const onPressCancelSearch = useCallback(() => {
     setQuery('')
     setIsActive(false)
   }, [setQuery])
 
-  const onSubmit = React.useCallback(() => {
+  const onSubmit = useCallback(() => {
     setIsActive(false)
-    if (!query.length) return
-    navigation.dispatch(StackActions.push('Search', {q: query}))
-  }, [query, navigation])
+    if (!deferredQuery.length) return
+    navigation.dispatch(StackActions.push('Search', {q: deferredQuery}))
+  }, [deferredQuery, navigation])
 
   const onSearchProfileCardPress = React.useCallback(() => {
     setQuery('')
@@ -106,62 +87,48 @@ export function DesktopSearch() {
   }, [])
 
   return (
-    <View style={[styles.container, pal.view]}>
+    <View style={[a.w_full]}>
       <SearchInput
         value={query}
         onChangeText={onChangeText}
         onClearText={onPressCancelSearch}
         onSubmitEditing={onSubmit}
       />
-      {query !== '' && isActive && moderationOpts && (
+      {deferredQuery !== '' && isActive && moderationOpts && (
         <View
           style={[
-            pal.view,
-            pal.borderDark,
-            styles.resultsContainer,
+            t.atoms.bg,
+            t.atoms.border_contrast_low,
+            a.mt_sm,
+            a.w_full,
+            a.border,
+            a.rounded_sm,
             a.overflow_hidden,
+            a.absolute,
           ]}>
+          <SearchLinkCard
+            label={_(msg`Search for "${deferredQuery}"`)}
+            to={{screen: 'Search', params: {q: deferredQuery}}}
+            style={[
+              ((autocompleteData?.length ?? 0) > 0 || isFetching) && a.border_b,
+            ]}
+          />
           {isFetching && !autocompleteData?.length ? (
-            <View style={{padding: 8}}>
+            <View style={[a.p_md]}>
               <ActivityIndicator />
             </View>
           ) : (
-            <>
-              <SearchLinkCard
-                label={_(msg`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}
               />
-              {autocompleteData?.map(item => (
-                <SearchProfileCard
-                  key={item.did}
-                  profile={item}
-                  moderationOpts={moderationOpts}
-                  onPress={onSearchProfileCardPress}
-                />
-              ))}
-            </>
+            ))
           )}
         </View>
       )}
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'relative',
-    width: '100%',
-  },
-  resultsContainer: {
-    marginTop: 10,
-    flexDirection: 'column',
-    width: '100%',
-    borderWidth: 1,
-    borderRadius: 6,
-  },
-})