Enlarge the view header, left align the title, and add a compose button

src/view/com/profile/ProfileHeader.tsx

@@ -1,12 +1,6 @@
 import React, {useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
-import {
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
-  ActivityIndicator,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {AtUri} from '../../../third-party/uri'
@@ -108,18 +102,6 @@ export const ProfileHeader = observer(function ProfileHeader({
     return (
       <View style={styles.outer}>
         <LoadingPlaceholder width="100%" height={120} />
-        {store.nav.tab.canGoBack ? (
-          <TouchableOpacity style={styles.backButton} onPress={onPressBack}>
-            <FontAwesomeIcon
-              size={18}
-              icon="angle-left"
-              style={styles.backIcon}
-            />
-          </TouchableOpacity>
-        ) : undefined}
-        <TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}>
-          <MagnifyingGlassIcon size={19} style={styles.searchIcon} />
-        </TouchableOpacity>
         <View style={styles.avi}>
           <LoadingPlaceholder
             width={80}
@@ -179,18 +161,6 @@ export const ProfileHeader = observer(function ProfileHeader({
   return (
     <View style={styles.outer}>
       <UserBanner handle={view.handle} />
-      {store.nav.tab.canGoBack ? (
-        <TouchableOpacity style={styles.backButton} onPress={onPressBack}>
-          <FontAwesomeIcon
-            size={18}
-            icon="angle-left"
-            style={styles.backIcon}
-          />
-        </TouchableOpacity>
-      ) : undefined}
-      <TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}>
-        <MagnifyingGlassIcon size={19} style={styles.searchIcon} />
-      </TouchableOpacity>
       <View style={styles.avi}>
         <UserAvatar
           size={80}
@@ -353,30 +323,6 @@ const styles = StyleSheet.create({
     width: '100%',
     height: 120,
   },
-  backButton: {
-    position: 'absolute',
-    top: 10,
-    left: 12,
-    backgroundColor: '#ffff',
-    padding: 6,
-    borderRadius: 30,
-  },
-  backIcon: {
-    width: 14,
-    height: 14,
-    color: colors.black,
-  },
-  searchBtn: {
-    position: 'absolute',
-    top: 10,
-    right: 12,
-    backgroundColor: '#ffff',
-    padding: 5,
-    borderRadius: 30,
-  },
-  searchIcon: {
-    color: colors.black,
-  },
   avi: {
     position: 'absolute',
     top: 80,

src/view/com/util/ViewHeader.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 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'
@@ -9,14 +8,19 @@ import {useStores} from '../../../state'
 export function ViewHeader({
   title,
   subtitle,
+  onPost,
 }: {
   title: string
   subtitle?: string
+  onPost?: () => void
 }) {
   const store = useStores()
   const onPressBack = () => {
     store.nav.tab.goBack()
   }
+  const onPressCompose = () => {
+    store.shell.openComposer({onPost})
+  }
   const onPressSearch = () => {
     store.nav.navigate(`/search`)
   }
@@ -26,9 +30,7 @@ export function ViewHeader({
         <TouchableOpacity onPress={onPressBack} style={styles.backIcon}>
           <FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} />
         </TouchableOpacity>
-      ) : (
+      ) : undefined}
-        <View style={styles.cornerPlaceholder} />
-      )}
       <View style={styles.titleContainer}>
         <Text style={styles.title}>{title}</Text>
         {subtitle ? (
@@ -37,8 +39,17 @@ export function ViewHeader({
           </Text>
         ) : undefined}
       </View>
-      <TouchableOpacity onPress={onPressSearch} style={styles.searchBtn}>
+      <TouchableOpacity onPress={onPressCompose} style={styles.btn}>
-        <MagnifyingGlassIcon size={17} style={styles.searchBtnIcon} />
+        <FontAwesomeIcon size={18} icon="plus" />
+      </TouchableOpacity>
+      <TouchableOpacity
+        onPress={onPressSearch}
+        style={[styles.btn, {marginLeft: 8}]}>
+        <MagnifyingGlassIcon
+          size={18}
+          strokeWidth={3}
+          style={styles.searchBtnIcon}
+        />
       </TouchableOpacity>
     </View>
   )
@@ -59,33 +70,28 @@ const styles = StyleSheet.create({
   titleContainer: {
     flexDirection: 'row',
     alignItems: 'baseline',
-    marginLeft: 'auto',
     marginRight: 'auto',
   },
   title: {
-    fontSize: 16,
+    fontSize: 21,
     fontWeight: '600',
   },
   subtitle: {
-    fontSize: 15,
+    fontSize: 18,
-    marginLeft: 3,
+    marginLeft: 6,
     color: colors.gray4,
     maxWidth: 200,
   },
 
-  cornerPlaceholder: {
-    width: 30,
-    height: 30,
-  },
   backIcon: {width: 30, height: 30},
-  searchBtn: {
+  btn: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: colors.gray1,
-    width: 30,
+    width: 36,
-    height: 30,
+    height: 36,
-    borderRadius: 15,
+    borderRadius: 20,
   },
   searchBtnIcon: {
     color: colors.black,

src/view/lib/icons.tsx

@@ -94,15 +94,17 @@ export function HomeIconSolid({
 export function MagnifyingGlassIcon({
   style,
   size,
+  strokeWidth = 2,
 }: {
   style?: StyleProp<ViewStyle>
   size?: string | number
+  strokeWidth?: number
 }) {
   return (
     <Svg
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={2}
+      strokeWidth={strokeWidth}
       stroke="currentColor"
       width={size || 24}
       height={size || 24}

src/view/screens/Home.tsx

@@ -80,7 +80,11 @@ export const Home = observer(function Home({
 
   return (
     <View style={s.flex1}>
-      <ViewHeader title="Bluesky" subtitle="Private Beta" />
+      <ViewHeader
+        title="Bluesky"
+        subtitle="Private Beta"
+        onPost={onCreatePost}
+      />
       <Feed
         key="default"
         feed={defaultFeedView}

src/view/screens/Profile.tsx

@@ -15,6 +15,7 @@ import {PostFeedLoadingPlaceholder} from '../com/util/LoadingPlaceholder'
 import {ErrorScreen} from '../com/util/ErrorScreen'
 import {ErrorMessage} from '../com/util/ErrorMessage'
 import {EmptyState} from '../com/util/EmptyState'
+import {ViewHeader} from '../com/util/ViewHeader'
 import Toast from '../com/util/Toast'
 import {s, colors} from '../lib/styles'
 
@@ -219,8 +220,11 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
     renderItem = () => <View />
   }
 
+  const title =
+    uiState.profile.displayName || uiState.profile.handle || params.name
   return (
     <View style={styles.container}>
+      <ViewHeader title={title} />
       {uiState.profile.hasError ? (
         <ErrorScreen
           title="Failed to load profile"