feat: implement DesktopSearch component

src/view/shell/web/DesktopHeader.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import {observer} from 'mobx-react-lite'
 import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {Text} from 'view/com/util/text/Text'
-import {Link} from 'view/com/util/Link'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
@@ -17,6 +16,7 @@ import {
   MagnifyingGlassIcon,
   CogIcon,
 } from 'lib/icons'
+import {DesktopSearch} from './DesktopSearch'
 
 interface NavItemProps {
   count?: number
@@ -90,6 +90,7 @@ export const DesktopHeader = observer(function DesktopHeader({}: {
   const store = useStores()
   const pal = usePalette('default')
   const onPressCompose = () => store.shell.openComposer({})
+
   return (
     <View style={[styles.header, pal.borderDark, pal.view]}>
       <Text type="title-xl" style={[pal.text, styles.title]}>
@@ -128,15 +129,7 @@ export const DesktopHeader = observer(function DesktopHeader({}: {
         </Text>
       </TouchableOpacity>
       <View style={styles.space20} />
-      <Link href="/search" style={[pal.view, pal.borderDark, styles.search]}>
+      <DesktopSearch />
-        <MagnifyingGlassIcon
-          size={18}
-          style={[pal.textLight, styles.searchIconWrapper]}
-        />
-        <Text type="md-thin" style={pal.textLight}>
-          Search
-        </Text>
-      </Link>
       <View style={styles.space15} />
       <ProfileItem />
       <NavItem
@@ -157,6 +150,7 @@ const styles = StyleSheet.create({
     paddingLeft: 30,
     paddingRight: 40,
     borderBottomWidth: 1,
+    zIndex: 1,
   },
 
   spaceFlex: {

src/view/shell/web/DesktopSearch.tsx

@@ -0,0 +1,165 @@
+import React from 'react'
+import {TextInput, View, StyleSheet, TouchableOpacity, Text} from 'react-native'
+import {UserAutocompleteViewModel} from 'state/models/user-autocomplete-view'
+import {observer} from 'mobx-react-lite'
+import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
+import {MagnifyingGlassIcon} from 'lib/icons'
+import {ProfileCard} from '../../com/profile/ProfileCard'
+
+export const DesktopSearch = observer(function DesktopSearch() {
+  const store = useStores()
+  const pal = usePalette('default')
+  const textInput = React.useRef<TextInput>(null)
+  const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
+  const [query, setQuery] = React.useState<string>('')
+  const autocompleteView = React.useMemo<UserAutocompleteViewModel>(
+    () => new UserAutocompleteViewModel(store),
+    [store],
+  )
+
+  const onChangeQuery = (text: string) => {
+    setQuery(text)
+    if (text.length > 0 && isInputFocused) {
+      autocompleteView.setActive(true)
+      autocompleteView.setPrefix(text)
+    } else {
+      autocompleteView.setActive(false)
+    }
+  }
+
+  const onPressCancelSearch = () => {
+    setQuery('')
+    autocompleteView.setActive(false)
+  }
+
+  return (
+    <View
+      style={[
+        styles.searchContainer,
+        pal.borderDark,
+        pal.view,
+        styles.container,
+        styles.search,
+      ]}>
+      <View style={[styles.container, styles.searchInputWrapper]}>
+        <MagnifyingGlassIcon
+          size={18}
+          style={[pal.textLight, styles.searchIconWrapper]}
+        />
+
+        <TextInput
+          testID="searchTextInput"
+          ref={textInput}
+          placeholder="Search"
+          placeholderTextColor={pal.colors.textLight}
+          selectTextOnFocus
+          returnKeyType="search"
+          value={query}
+          style={[pal.textLight, styles.headerSearchInput]}
+          onFocus={() => setIsInputFocused(true)}
+          onBlur={() => setIsInputFocused(false)}
+          onChangeText={onChangeQuery}
+        />
+
+        {query ? (
+          <View style={styles.headerCancelBtn}>
+            <TouchableOpacity onPress={onPressCancelSearch}>
+              <Text>Cancel</Text>
+            </TouchableOpacity>
+          </View>
+        ) : undefined}
+      </View>
+
+      <View
+        style={[
+          {backgroundColor: pal.colors.background},
+          styles.searchResultsContainer,
+          styles.container,
+        ]}>
+        {query && autocompleteView.searchRes.length ? (
+          <>
+            {autocompleteView.searchRes.map(item => (
+              <ProfileCard
+                key={item.did}
+                handle={item.handle}
+                displayName={item.displayName}
+                avatar={item.avatar}
+              />
+            ))}
+          </>
+        ) : query && !autocompleteView.searchRes.length ? (
+          <View>
+            <Text style={[pal.textLight, styles.searchPrompt]}>
+              No results found for {autocompleteView.prefix}
+            </Text>
+          </View>
+        ) : isInputFocused ? (
+          <View>
+            <Text style={[pal.textLight, styles.searchPrompt]}>
+              Search for users on the network
+            </Text>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  search: {
+    maxWidth: 300,
+    borderRadius: 20,
+    borderWidth: 1,
+  },
+  searchIconWrapper: {
+    flexDirection: 'row',
+    width: 30,
+    justifyContent: 'center',
+    marginRight: 2,
+  },
+  searchInputWrapper: {
+    flexDirection: 'row',
+  },
+  searchContainer: {
+    flexWrap: 'wrap',
+    position: 'relative',
+    paddingHorizontal: 12,
+    paddingTop: 6,
+    paddingBottom: 6,
+  },
+  headerMenuBtn: {
+    width: 40,
+    height: 30,
+    marginLeft: 6,
+  },
+  searchResultsContainer: {
+    position: 'fixed',
+    flex: 1,
+    flexDirection: 'column',
+    borderRadius: 30,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    marginTop: 50,
+  },
+  headerSearchIcon: {
+    marginRight: 6,
+    alignSelf: 'center',
+  },
+  headerSearchInput: {
+    flex: 1,
+    fontSize: 17,
+    width: '100%',
+  },
+  headerCancelBtn: {
+    width: 60,
+    paddingLeft: 10,
+  },
+  searchPrompt: {
+    textAlign: 'center',
+    paddingTop: 10,
+  },
+})