Update Search to use ALF atoms (#10146)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/view/shell/desktop/Search.tsx

@@ -1,7 +1,6 @@
 import {memo, useCallback, useState} from 'react'
 import {
-  ActivityIndicator,
+  type StyleProp,
-  StyleSheet,
   TouchableOpacity,
   View,
   type ViewStyle,
@@ -9,15 +8,17 @@ import {
 import {useLingui} from '@lingui/react/macro'
 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} from '#/components/Link'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+const WHITESPACE_RE = /\s+/gu
 
 let SearchLinkCard = ({
   label,
@@ -28,20 +29,17 @@ let SearchLinkCard = ({
   label: string
   to?: string
   onPress?: () => void
-  style?: ViewStyle
+  style?: StyleProp<ViewStyle>
 }): React.ReactNode => {
-  const pal = usePalette('default')
+  const t = useTheme()
 
   const inner = (
-    <View
+    <View style={[a.py_lg, a.px_md, t.atoms.border_contrast_low, style]}>
-      style={[pal.border, {paddingVertical: 16, paddingHorizontal: 12}, style]}>
+      <Text style={[a.text_md, t.atoms.text]}>{label}</Text>
-      <Text type="md" style={[pal.text]}>
-        {label}
-      </Text>
     </View>
   )
 
-  if (onPress) {
+  if (onPress || !to) {
     return (
       <TouchableOpacity
         onPress={onPress}
@@ -53,17 +51,12 @@ let SearchLinkCard = ({
   }
 
   return (
-    <Link href={to} asAnchor anchorNoUnderline>
+    <Link
-      <View
+      label={label}
-        style={[
+      to={to}
-          pal.border,
+      style={[a.py_lg, a.px_md, t.atoms.border_contrast_low, style]}
-          {paddingVertical: 16, paddingHorizontal: 12},
+      hoverStyle={[t.atoms.bg_contrast_25]}>
-          style,
+      <Text style={[a.text_md, t.atoms.text]}>{label}</Text>
-        ]}>
-        <Text type="md" style={[pal.text]}>
-          {label}
-        </Text>
-      </View>
     </Link>
   )
 }
@@ -71,8 +64,8 @@ SearchLinkCard = memo(SearchLinkCard)
 export {SearchLinkCard}
 
 export function DesktopSearch() {
+  const t = useTheme()
   const {t: l} = useLingui()
-  const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
   const [isActive, setIsActive] = useState<boolean>(false)
   const [query, setQuery] = useState<string>('')
@@ -80,6 +73,7 @@ export function DesktopSearch() {
     query,
     true,
   )
+  const tQuery = query.replace(WHITESPACE_RE, ' ').trim()
 
   const moderationOpts = useModerationOpts()
 
@@ -95,9 +89,9 @@ export function DesktopSearch() {
 
   const onSubmit = useCallback(() => {
     setIsActive(false)
-    if (!query.length) return
+    if (!tQuery.length) return
-    navigation.dispatch(StackActions.push('Search', {q: query}))
+    navigation.dispatch(StackActions.push('Search', {q: tQuery}))
-  }, [query, navigation])
+  }, [tQuery, navigation])
 
   const onSearchProfileCardPress = useCallback(() => {
     setQuery('')
@@ -105,62 +99,58 @@ export function DesktopSearch() {
   }, [])
 
   return (
-    <View style={[styles.container, pal.view]}>
+    <View style={[a.relative, a.w_full, a.z_10, t.atoms.bg]}>
       <SearchInput
         value={query}
         onChangeText={onChangeText}
         onClearText={onPressCancelSearch}
         onSubmitEditing={onSubmit}
       />
-      {query !== '' && isActive && moderationOpts && (
+      {tQuery !== '' && isActive && moderationOpts && (
         <View
           style={[
-            pal.view,
+            a.mt_sm,
-            pal.borderDark,
+            a.flex_col,
-            styles.resultsContainer,
+            a.w_full,
-            a.overflow_hidden,
+            a.border,
+            a.rounded_sm,
+            a.zoom_fade_in,
+            t.atoms.bg,
+            t.atoms.shadow_sm,
+            t.atoms.border_contrast_low,
+            {
+              overflow: 'hidden',
+              position: 'absolute',
+              top: '100%',
+            },
           ]}>
+          <SearchLinkCard
+            label={l`Search for “${tQuery}”`}
+            to={`/search?q=${encodeURIComponent(tQuery)}`}
+            style={(autocompleteData?.length ?? 0) > 0 ? a.border_b : undefined}
+          />
           {isFetching && !autocompleteData?.length ? (
-            <View style={{padding: 8}}>
+            <View
-              <ActivityIndicator />
+              style={[
+                a.py_lg,
+                a.align_center,
+                a.border_t,
+                t.atoms.border_contrast_low,
+              ]}>
+              <Loader size="lg" />
             </View>
           ) : (
-            <>
+            autocompleteData?.map(item => (
-              <SearchLinkCard
+              <SearchProfileCard
-                label={l`Search for "${query}"`}
+                key={item.did}
-                to={`/search?q=${encodeURIComponent(query)}`}
+                profile={item}
-                style={
+                moderationOpts={moderationOpts}
-                  (autocompleteData?.length ?? 0) > 0
+                onPress={onSearchProfileCardPress}
-                    ? {borderBottomWidth: 1}
-                    : undefined
-                }
               />
-              {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,
-  },
-})