Move search btn into the viewheader

src/view/com/profile/ProfileHeader.tsx

@@ -20,6 +20,7 @@ import {
 import {pluralize} from '../../lib/strings'
 import {s, colors} from '../../lib/styles'
 import {getGradient} from '../../lib/asset-gen'
+import {MagnifyingGlassIcon} from '../../lib/icons'
 import {DropdownBtn, DropdownItem} from '../util/DropdownBtn'
 import Toast from '../util/Toast'
 import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
@@ -43,10 +44,8 @@ export const ProfileHeader = observer(function ProfileHeader({
   const onPressBack = () => {
     store.nav.tab.goBack()
   }
-  const onPressMyAvatar = () => {
+  const onPressSearch = () => {
-    if (store.me.handle) {
+    store.nav.navigate(`/search`)
-      store.nav.navigate(`/profile/${store.me.handle}`)
-    }
   }
   const onPressToggleFollow = () => {
     view?.toggleFollowing().then(
@@ -117,15 +116,9 @@ export const ProfileHeader = observer(function ProfileHeader({
             />
           </TouchableOpacity>
         ) : undefined}
-        {store.me.did ? (
+        <TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}>
-          <TouchableOpacity style={styles.myAvatar} onPress={onPressMyAvatar}>
+          <MagnifyingGlassIcon size={19} style={styles.searchIcon} />
-            <UserAvatar
-              size={30}
-              handle={store.me.handle || ''}
-              displayName={store.me.displayName}
-            />
         </TouchableOpacity>
-        ) : undefined}
         <View style={styles.avi}>
           <LoadingPlaceholder
             width={80}
@@ -194,15 +187,9 @@ export const ProfileHeader = observer(function ProfileHeader({
           />
         </TouchableOpacity>
       ) : undefined}
-      {store.me.did ? (
+      <TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}>
-        <TouchableOpacity style={styles.myAvatar} onPress={onPressMyAvatar}>
+        <MagnifyingGlassIcon size={19} style={styles.searchIcon} />
-          <UserAvatar
-            size={30}
-            handle={store.me.handle || ''}
-            displayName={store.me.displayName}
-          />
       </TouchableOpacity>
-      ) : undefined}
       <View style={styles.avi}>
         <UserAvatar
           size={80}
@@ -375,14 +362,17 @@ const styles = StyleSheet.create({
     height: 14,
     color: colors.black,
   },
-  myAvatar: {
+  searchBtn: {
     position: 'absolute',
     top: 10,
     right: 12,
     backgroundColor: '#ffff',
-    padding: 1,
+    padding: 5,
     borderRadius: 30,
   },
+  searchIcon: {
+    color: colors.black,
+  },
   avi: {
     position: 'absolute',
     top: 80,

src/view/com/util/ViewHeader.tsx

@@ -3,6 +3,7 @@ import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {UserAvatar} from './UserAvatar'
 import {colors} from '../../lib/styles'
+import {MagnifyingGlassIcon} from '../../lib/icons'
 import {useStores} from '../../../state'
 
 export function ViewHeader({
@@ -16,16 +17,14 @@ export function ViewHeader({
   const onPressBack = () => {
     store.nav.tab.goBack()
   }
-  const onPressAvatar = () => {
+  const onPressSearch = () => {
-    if (store.me.handle) {
+    store.nav.navigate(`/search`)
-      store.nav.navigate(`/profile/${store.me.handle}`)
-    }
   }
   return (
     <View style={styles.header}>
       {store.nav.tab.canGoBack ? (
         <TouchableOpacity onPress={onPressBack} style={styles.backIcon}>
-          <FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 3}} />
+          <FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} />
         </TouchableOpacity>
       ) : (
         <View style={styles.cornerPlaceholder} />
@@ -38,17 +37,9 @@ export function ViewHeader({
           </Text>
         ) : undefined}
       </View>
-      {store.me.did ? (
+      <TouchableOpacity onPress={onPressSearch} style={styles.searchBtn}>
-        <TouchableOpacity onPress={onPressAvatar}>
+        <MagnifyingGlassIcon size={17} style={styles.searchBtnIcon} />
-          <UserAvatar
-            size={24}
-            handle={store.me.handle || ''}
-            displayName={store.me.displayName}
-          />
       </TouchableOpacity>
-      ) : (
-        <View style={styles.cornerPlaceholder} />
-      )}
     </View>
   )
 }
@@ -83,8 +74,22 @@ const styles = StyleSheet.create({
   },
 
   cornerPlaceholder: {
-    width: 24,
+    width: 30,
-    height: 24,
+    height: 30,
+  },
+  backIcon: {width: 30, height: 30},
+  searchBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.gray1,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+  },
+  searchBtnIcon: {
+    color: colors.black,
+    position: 'relative',
+    top: -1,
   },
-  backIcon: {width: 24, height: 24},
 })

src/view/lib/icons.tsx

@@ -91,7 +91,7 @@ export function HomeIconSolid({
 
 // Copyright (c) 2020 Refactoring UI Inc.
 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
-export function MangifyingGlassIcon({
+export function MagnifyingGlassIcon({
   style,
   size,
 }: {
@@ -116,33 +116,6 @@ export function MangifyingGlassIcon({
   )
 }
 
-// Copyright (c) 2020 Refactoring UI Inc.
-// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
-export function MangifyingGlassIconSolid({
-  style,
-  size,
-}: {
-  style?: StyleProp<ViewStyle>
-  size?: string | number
-}) {
-  return (
-    <Svg
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={3}
-      stroke="currentColor"
-      width={size || 24}
-      height={size || 24}
-      style={style}>
-      <Path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-      />
-    </Svg>
-  )
-}
-
 // https://github.com/Remix-Design/RemixIcon/blob/master/License
 export function BellIcon({
   style,

src/view/screens/Home.tsx

@@ -5,7 +5,6 @@ import useAppState from 'react-native-appstate-hook'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/posts/Feed'
-import {FAB} from '../com/util/FloatingActionButton'
 import {useStores} from '../../state'
 import {FeedModel} from '../../state/models/feed-view'
 import {ScreenParams} from '../routes'
@@ -81,6 +80,7 @@ export const Home = observer(function Home({
 
   return (
     <View style={s.flex1}>
+      <ViewHeader title="Bluesky" subtitle="Private Beta" />
       <Feed
         key="default"
         feed={defaultFeedView}

src/view/shell/mobile/index.tsx

@@ -42,8 +42,6 @@ import {
   GridIconSolid,
   HomeIcon,
   HomeIconSolid,
-  MangifyingGlassIcon,
-  MangifyingGlassIconSolid,
   BellIcon,
   BellIconSolid,
 } from '../../lib/icons'
@@ -66,8 +64,6 @@ const Btn = ({
     | 'home-solid'
     | 'bell'
     | 'bell-solid'
-    | 'search'
-    | 'search-solid'
   notificationCount?: number
   tabCount?: number
   onPress?: (event: GestureResponderEvent) => void
@@ -86,14 +82,6 @@ const Btn = ({
   } else if (icon === 'home-solid') {
     IconEl = HomeIconSolid
     size = 24
-  } else if (icon === 'search') {
-    IconEl = MangifyingGlassIcon
-    size = 24
-    addedStyles = {position: 'relative', top: -1} as ViewStyle
-  } else if (icon === 'search-solid') {
-    IconEl = MangifyingGlassIconSolid
-    size = 24
-    addedStyles = {position: 'relative', top: -1} as ViewStyle
   } else if (icon === 'bell') {
     IconEl = BellIcon
     size = 24
@@ -148,7 +136,6 @@ export const MobileShell: React.FC = observer(() => {
       store.nav.navigate('/')
     }
   }
-  const onPressSearch = () => store.nav.navigate('/search')
   const onPressMenu = () => setMainMenuActive(true)
   const onPressNotifications = () => store.nav.navigate('/notifications')
   const onPressTabs = () => toggleTabsMenu(!isTabsSelectorActive)
@@ -262,7 +249,6 @@ export const MobileShell: React.FC = observer(() => {
   }
 
   const isAtHome = store.nav.tab.current.url === '/'
-  const isAtSearch = store.nav.tab.current.url === '/search'
   const isAtNotifications = store.nav.tab.current.url === '/notifications'
   return (
     <View style={styles.outerContainer}>
@@ -327,11 +313,6 @@ export const MobileShell: React.FC = observer(() => {
           onPress={onPressHome}
           onLongPress={doNewTab('/')}
         />
-        <Btn
-          icon={isAtSearch ? 'search-solid' : 'search'}
-          onPress={onPressSearch}
-          onLongPress={doNewTab('/search')}
-        />
         {TABS_ENABLED ? (
           <Btn
             icon={isTabsSelectorActive ? 'clone' : ['far', 'clone']}