Add search button to header on feeds screen (#2848)

* add search bar to header

* add button on web

src/view/com/util/forms/SearchInput.tsx

@@ -26,14 +26,23 @@ interface Props {
   onSubmitQuery: () => void
   style?: StyleProp<ViewStyle>
 }
-export function SearchInput({
+
+export interface SearchInputRef {
+  focus?: () => void
+}
+
+export const SearchInput = React.forwardRef<SearchInputRef, Props>(
+  function SearchInput(
+    {
       query,
       setIsInputFocused,
       onChangeQuery,
       onPressCancelSearch,
       onSubmitQuery,
       style,
-}: Props) {
+    },
+    ref,
+  ) {
     const theme = useTheme()
     const pal = usePalette('default')
     const {_} = useLingui()
@@ -44,6 +53,11 @@ export function SearchInput({
       textInput.current?.blur()
     }, [onPressCancelSearch, textInput])
 
+    React.useImperativeHandle(ref, () => ({
+      focus: () => textInput.current?.focus(),
+      blur: () => textInput.current?.blur(),
+    }))
+
     return (
       <View style={[pal.viewLight, styles.container, style]}>
         <MagnifyingGlassIcon style={[pal.icon, styles.icon]} size={21} />
@@ -83,7 +97,8 @@ export function SearchInput({
         ) : undefined}
       </View>
     )
-}
+  },
+)
 
 const styles = StyleSheet.create({
   container: {

src/view/screens/Feeds.tsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import {ActivityIndicator, StyleSheet, View, type FlatList} from 'react-native'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  type FlatList,
+  Pressable,
+} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
 import {ViewHeader} from 'view/com/util/ViewHeader'
@@ -8,9 +14,9 @@ import {Link} from 'view/com/util/Link'
 import {NativeStackScreenProps, FeedsTabNavigatorParams} from 'lib/routes/types'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {ComposeIcon2, CogIcon} from 'lib/icons'
+import {ComposeIcon2, CogIcon, MagnifyingGlassIcon2} from 'lib/icons'
 import {s} from 'lib/styles'
-import {SearchInput} from 'view/com/util/forms/SearchInput'
+import {SearchInput, SearchInputRef} from 'view/com/util/forms/SearchInput'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {
   LoadingPlaceholder,
@@ -36,6 +42,7 @@ import {cleanError} from 'lib/strings/errors'
 import {useComposerControls} from '#/state/shell/composer'
 import {useSession} from '#/state/session'
 import {isNative} from '#/platform/detection'
+import {HITSLOP_10} from 'lib/constants'
 
 type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
 
@@ -121,6 +128,7 @@ export function FeedsScreen(_props: Props) {
   } = useSearchPopularFeedsMutation()
   const {hasSession} = useSession()
   const listRef = React.useRef<FlatList>(null)
+  const searchInputRef = React.useRef<SearchInputRef>(null)
 
   /**
    * A search query is present. We may not have search results yet.
@@ -330,6 +338,17 @@ export function FeedsScreen(_props: Props) {
 
   const renderHeaderBtn = React.useCallback(() => {
     return (
+      <View style={styles.headerBtnGroup}>
+        <Pressable
+          accessibilityRole="button"
+          hitSlop={HITSLOP_10}
+          onPress={searchInputRef.current?.focus}>
+          <MagnifyingGlassIcon2
+            size={22}
+            strokeWidth={2}
+            style={pal.textLight}
+          />
+        </Pressable>
         <Link
           href="/settings/saved-feeds"
           hitSlop={10}
@@ -338,6 +357,7 @@ export function FeedsScreen(_props: Props) {
           accessibilityHint={_(msg`Opens screen to edit Saved Feeds`)}>
           <CogIcon size={22} strokeWidth={2} style={pal.textLight} />
         </Link>
+      </View>
     )
   }, [pal, _])
 
@@ -398,6 +418,17 @@ export function FeedsScreen(_props: Props) {
               <Text type="title-lg" style={[pal.text, s.bold]}>
                 <Trans>My Feeds</Trans>
               </Text>
+              <View style={styles.headerBtnGroup}>
+                <Pressable
+                  accessibilityRole="button"
+                  hitSlop={HITSLOP_10}
+                  onPress={searchInputRef.current?.focus}>
+                  <MagnifyingGlassIcon2
+                    size={22}
+                    strokeWidth={2}
+                    style={pal.icon}
+                  />
+                </Pressable>
                 <Link
                   href="/settings/saved-feeds"
                   accessibilityLabel={_(msg`Edit My Feeds`)}
@@ -405,6 +436,7 @@ export function FeedsScreen(_props: Props) {
                   <CogIcon strokeWidth={1.5} style={pal.icon} size={28} />
                 </Link>
               </View>
+            </View>
           )
         }
         return <View />
@@ -443,6 +475,7 @@ export function FeedsScreen(_props: Props) {
 
               {!isMobile && (
                 <SearchInput
+                  ref={searchInputRef}
                   query={query}
                   onChangeQuery={onChangeQuery}
                   onPressCancelSearch={onPressCancelSearch}
@@ -456,6 +489,7 @@ export function FeedsScreen(_props: Props) {
             {isMobile && (
               <View style={{paddingHorizontal: 8, paddingBottom: 10}}>
                 <SearchInput
+                  ref={searchInputRef}
                   query={query}
                   onChangeQuery={onChangeQuery}
                   onPressCancelSearch={onPressCancelSearch}
@@ -663,4 +697,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
     paddingVertical: 2,
   },
+  headerBtnGroup: {
+    flexDirection: 'row',
+    gap: 15,
+    alignItems: 'center',
+  },
 })