about summary refs log tree commit diff
path: root/src/view/com
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com')
-rw-r--r--src/view/com/composer/Prompt.tsx63
-rw-r--r--src/view/com/modals/ServerInput.tsx4
-rw-r--r--src/view/com/onboard/FeatureExplainer.tsx5
-rw-r--r--src/view/com/post-thread/PostThreadItem.tsx34
-rw-r--r--src/view/com/post/Post.tsx8
-rw-r--r--src/view/com/posts/Feed.tsx15
-rw-r--r--src/view/com/posts/FeedItem.tsx8
-rw-r--r--src/view/com/profile/ProfileHeader.tsx38
-rw-r--r--src/view/com/util/DropdownBtn.tsx17
-rw-r--r--src/view/com/util/LoadingPlaceholder.tsx12
-rw-r--r--src/view/com/util/PostCtrls.tsx63
-rw-r--r--src/view/com/util/ViewHeader.tsx43
12 files changed, 146 insertions, 164 deletions
diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx
new file mode 100644
index 000000000..4a84c7160
--- /dev/null
+++ b/src/view/com/composer/Prompt.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {colors} from '../../lib/styles'
+import {useStores} from '../../../state'
+import {UserAvatar} from '../util/UserAvatar'
+
+export function ComposePrompt({onPressCompose}: {onPressCompose: () => void}) {
+  const store = useStores()
+  const onPressAvatar = () => {
+    store.nav.navigate(`/profile/${store.me.handle}`)
+  }
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPressCompose}>
+      <TouchableOpacity style={styles.avatar} onPress={onPressAvatar}>
+        <UserAvatar
+          size={50}
+          handle={store.me.handle || ''}
+          displayName={store.me.displayName}
+        />
+      </TouchableOpacity>
+      <View style={styles.textContainer}>
+        <Text style={styles.text}>What's happening?</Text>
+      </View>
+      <View style={styles.btn}>
+        <Text style={styles.btnText}>Post</Text>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 6,
+    margin: 2,
+    marginBottom: 0,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.white,
+  },
+  avatar: {
+    width: 50,
+  },
+  textContainer: {
+    marginLeft: 10,
+    flex: 1,
+  },
+  text: {
+    color: colors.gray4,
+    fontSize: 17,
+  },
+  btn: {
+    backgroundColor: colors.gray1,
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 30,
+  },
+  btnText: {
+    color: colors.gray5,
+  },
+})
diff --git a/src/view/com/modals/ServerInput.tsx b/src/view/com/modals/ServerInput.tsx
index 0aa1a07e2..c885ff164 100644
--- a/src/view/com/modals/ServerInput.tsx
+++ b/src/view/com/modals/ServerInput.tsx
@@ -5,11 +5,11 @@ import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
 import {
-  IS_PROD_BUILD,
   LOCAL_DEV_SERVICE,
   STAGING_SERVICE,
   PROD_SERVICE,
 } from '../../../state/index'
+import {LOGIN_INCLUDE_DEV_SERVERS} from '../../../build-flags'
 
 export const snapPoints = ['80%']
 
@@ -36,7 +36,7 @@ export function Component({
       <Text style={[s.textCenter, s.bold, s.f18]}>Choose Service</Text>
       <BottomSheetScrollView style={styles.inner}>
         <View style={styles.group}>
-          {!IS_PROD_BUILD ? (
+          {LOGIN_INCLUDE_DEV_SERVERS ? (
             <>
               <TouchableOpacity
                 style={styles.btn}
diff --git a/src/view/com/onboard/FeatureExplainer.tsx b/src/view/com/onboard/FeatureExplainer.tsx
index 0f8c52ea5..d9f70cf4f 100644
--- a/src/view/com/onboard/FeatureExplainer.tsx
+++ b/src/view/com/onboard/FeatureExplainer.tsx
@@ -15,6 +15,7 @@ import {UserGroupIcon} from '../../lib/icons'
 import {useStores} from '../../../state'
 import {s} from '../../lib/styles'
 import {SCENE_EXPLAINER, TABS_EXPLAINER} from '../../lib/assets'
+import {TABS_ENABLED} from '../../../build-flags'
 
 const Intro = () => (
   <View style={styles.explainer}>
@@ -85,8 +86,8 @@ export const FeatureExplainer = () => {
   const routes = [
     {key: 'intro', title: 'Intro'},
     {key: 'scenes', title: 'Scenes'},
-    {key: 'tabs', title: 'Tabs'},
-  ]
+    TABS_ENABLED ? {key: 'tabs', title: 'Tabs'} : undefined,
+  ].filter(Boolean)
 
   const onPressSkip = () => store.onboard.next()
   const onPressNext = () => {
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 665c87b46..83aac1010 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -29,8 +29,7 @@ export const PostThreadItem = observer(function PostThreadItem({
   const store = useStores()
   const [deleted, setDeleted] = useState(false)
   const record = item.record as unknown as PostType.Record
-  const hasEngagement =
-    item.upvoteCount || item.downvoteCount || item.repostCount
+  const hasEngagement = item.upvoteCount || item.repostCount
 
   const itemHref = useMemo(() => {
     const urip = new AtUri(item.uri)
@@ -44,11 +43,6 @@ export const PostThreadItem = observer(function PostThreadItem({
     return `/profile/${item.author.handle}/post/${urip.rkey}/upvoted-by`
   }, [item.uri, item.author.handle])
   const upvotesTitle = 'Upvotes on this post'
-  const downvotesHref = useMemo(() => {
-    const urip = new AtUri(item.uri)
-    return `/profile/${item.author.handle}/post/${urip.rkey}/downvoted-by`
-  }, [item.uri, item.author.handle])
-  const downvotesTitle = 'Downvotes on this post'
   const repostsHref = useMemo(() => {
     const urip = new AtUri(item.uri)
     return `/profile/${item.author.handle}/post/${urip.rkey}/reposted-by`
@@ -71,11 +65,6 @@ export const PostThreadItem = observer(function PostThreadItem({
       .toggleUpvote()
       .catch(e => console.error('Failed to toggle upvote', record, e))
   }
-  const onPressToggleDownvote = () => {
-    item
-      .toggleDownvote()
-      .catch(e => console.error('Failed to toggle downvote', record, e))
-  }
   const onDeletePost = () => {
     item.delete().then(
       () => {
@@ -186,21 +175,6 @@ export const PostThreadItem = observer(function PostThreadItem({
               ) : (
                 <></>
               )}
-              {item.downvoteCount ? (
-                <Link
-                  style={styles.expandedInfoItem}
-                  href={downvotesHref}
-                  title={downvotesTitle}>
-                  <Text style={[s.gray5, s.semiBold, s.f18]}>
-                    <Text style={[s.bold, s.black, s.f18]}>
-                      {item.downvoteCount}
-                    </Text>{' '}
-                    {pluralize(item.downvoteCount, 'downvote')}
-                  </Text>
-                </Link>
-              ) : (
-                <></>
-              )}
             </View>
           ) : (
             <></>
@@ -210,14 +184,11 @@ export const PostThreadItem = observer(function PostThreadItem({
               replyCount={item.replyCount}
               repostCount={item.repostCount}
               upvoteCount={item.upvoteCount}
-              downvoteCount={item.downvoteCount}
               isReposted={!!item.myState.repost}
               isUpvoted={!!item.myState.upvote}
-              isDownvoted={!!item.myState.downvote}
               onPressReply={onPressReply}
               onPressToggleRepost={onPressToggleRepost}
               onPressToggleUpvote={onPressToggleUpvote}
-              onPressToggleDownvote={onPressToggleDownvote}
             />
           </View>
         </View>
@@ -299,14 +270,11 @@ export const PostThreadItem = observer(function PostThreadItem({
               replyCount={item.replyCount}
               repostCount={item.repostCount}
               upvoteCount={item.upvoteCount}
-              downvoteCount={item.downvoteCount}
               isReposted={!!item.myState.repost}
               isUpvoted={!!item.myState.upvote}
-              isDownvoted={!!item.myState.downvote}
               onPressReply={onPressReply}
               onPressToggleRepost={onPressToggleRepost}
               onPressToggleUpvote={onPressToggleUpvote}
-              onPressToggleDownvote={onPressToggleDownvote}
             />
           </View>
         </View>
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index a5c084570..10f8048f0 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -85,11 +85,6 @@ export const Post = observer(function Post({uri}: {uri: string}) {
       .toggleUpvote()
       .catch(e => console.error('Failed to toggle upvote', record, e))
   }
-  const onPressToggleDownvote = () => {
-    item
-      .toggleDownvote()
-      .catch(e => console.error('Failed to toggle downvote', record, e))
-  }
   const onDeletePost = () => {
     item.delete().then(
       () => {
@@ -154,14 +149,11 @@ export const Post = observer(function Post({uri}: {uri: string}) {
             replyCount={item.replyCount}
             repostCount={item.repostCount}
             upvoteCount={item.upvoteCount}
-            downvoteCount={item.downvoteCount}
             isReposted={!!item.myState.repost}
             isUpvoted={!!item.myState.upvote}
-            isDownvoted={!!item.myState.downvote}
             onPressReply={onPressReply}
             onPressToggleRepost={onPressToggleRepost}
             onPressToggleUpvote={onPressToggleUpvote}
-            onPressToggleDownvote={onPressToggleDownvote}
           />
         </View>
       </View>
diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx
index d10be821f..3a2bc6189 100644
--- a/src/view/com/posts/Feed.tsx
+++ b/src/view/com/posts/Feed.tsx
@@ -6,23 +6,34 @@ import {EmptyState} from '../util/EmptyState'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {FeedModel, FeedItemModel} from '../../../state/models/feed-view'
 import {FeedItem} from './FeedItem'
+import {ComposePrompt} from '../composer/Prompt'
+
+const COMPOSE_PROMPT_ITEM = {_reactKey: '__prompt__'}
 
 export const Feed = observer(function Feed({
   feed,
   style,
   scrollElRef,
+  onPressCompose,
   onPressTryAgain,
 }: {
   feed: FeedModel
   style?: StyleProp<ViewStyle>
   scrollElRef?: MutableRefObject<FlatList<any> | null>
+  onPressCompose?: () => void
   onPressTryAgain?: () => void
 }) {
   // TODO optimize renderItem or FeedItem, we're getting this notice from RN: -prf
   //   VirtualizedList: You have a large list that is slow to update - make sure your
   //   renderItem function renders components that follow React performance best practices
   //   like PureComponent, shouldComponentUpdate, etc
-  const renderItem = ({item}: {item: FeedItemModel}) => <FeedItem item={item} />
+  const renderItem = ({item}: {item: FeedItemModel}) => {
+    if (item === COMPOSE_PROMPT_ITEM) {
+      return <ComposePrompt onPressCompose={onPressCompose} />
+    } else {
+      return <FeedItem item={item} />
+    }
+  }
   const onRefresh = () => {
     feed.refresh().catch(err => console.error('Failed to refresh', err))
   }
@@ -45,7 +56,7 @@ export const Feed = observer(function Feed({
       {feed.hasContent && (
         <FlatList
           ref={scrollElRef}
-          data={feed.feed.slice()}
+          data={[COMPOSE_PROMPT_ITEM].concat(feed.feed.slice())}
           keyExtractor={item => item._reactKey}
           renderItem={renderItem}
           refreshing={feed.isRefreshing}
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 2898deff5..6deb04209 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -53,11 +53,6 @@ export const FeedItem = observer(function FeedItem({
       .toggleUpvote()
       .catch(e => console.error('Failed to toggle upvote', record, e))
   }
-  const onPressToggleDownvote = () => {
-    item
-      .toggleDownvote()
-      .catch(e => console.error('Failed to toggle downvote', record, e))
-  }
   const onDeletePost = () => {
     item.delete().then(
       () => {
@@ -150,14 +145,11 @@ export const FeedItem = observer(function FeedItem({
             replyCount={item.replyCount}
             repostCount={item.repostCount}
             upvoteCount={item.upvoteCount}
-            downvoteCount={item.downvoteCount}
             isReposted={!!item.myState.repost}
             isUpvoted={!!item.myState.upvote}
-            isDownvoted={!!item.myState.downvote}
             onPressReply={onPressReply}
             onPressToggleRepost={onPressToggleRepost}
             onPressToggleUpvote={onPressToggleUpvote}
-            onPressToggleDownvote={onPressToggleDownvote}
           />
         </View>
       </View>
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 5a3743763..ed8924964 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/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 = () => {
-    if (store.me.handle) {
-      store.nav.navigate(`/profile/${store.me.handle}`)
-    }
+  const onPressSearch = () => {
+    store.nav.navigate(`/search`)
   }
   const onPressToggleFollow = () => {
     view?.toggleFollowing().then(
@@ -117,15 +116,9 @@ export const ProfileHeader = observer(function ProfileHeader({
             />
           </TouchableOpacity>
         ) : undefined}
-        {store.me.did ? (
-          <TouchableOpacity style={styles.myAvatar} onPress={onPressMyAvatar}>
-            <UserAvatar
-              size={30}
-              handle={store.me.handle || ''}
-              displayName={store.me.displayName}
-            />
-          </TouchableOpacity>
-        ) : undefined}
+        <TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}>
+          <MagnifyingGlassIcon size={19} style={styles.searchIcon} />
+        </TouchableOpacity>
         <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.myAvatar} onPress={onPressMyAvatar}>
-          <UserAvatar
-            size={30}
-            handle={store.me.handle || ''}
-            displayName={store.me.displayName}
-          />
-        </TouchableOpacity>
-      ) : undefined}
+      <TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}>
+        <MagnifyingGlassIcon size={19} style={styles.searchIcon} />
+      </TouchableOpacity>
       <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,
diff --git a/src/view/com/util/DropdownBtn.tsx b/src/view/com/util/DropdownBtn.tsx
index 99cc00bd2..01c9259a2 100644
--- a/src/view/com/util/DropdownBtn.tsx
+++ b/src/view/com/util/DropdownBtn.tsx
@@ -16,6 +16,7 @@ import {colors} from '../../lib/styles'
 import {toShareUrl} from '../../lib/strings'
 import {useStores} from '../../../state'
 import {ConfirmModel} from '../../../state/models/shell-ui'
+import {TABS_ENABLED} from '../../../build-flags'
 
 export interface DropdownItem {
   icon?: IconProp
@@ -84,13 +85,15 @@ export function PostDropdownBtn({
   const store = useStores()
 
   const dropdownItems: DropdownItem[] = [
-    {
-      icon: ['far', 'clone'],
-      label: 'Open in new tab',
-      onPress() {
-        store.nav.newTab(itemHref)
-      },
-    },
+    TABS_ENABLED
+      ? {
+          icon: ['far', 'clone'],
+          label: 'Open in new tab',
+          onPress() {
+            store.nav.newTab(itemHref)
+          },
+        }
+      : undefined,
     {
       icon: 'share',
       label: 'Share...',
diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx
index c198407de..5ccd1bd14 100644
--- a/src/view/com/util/LoadingPlaceholder.tsx
+++ b/src/view/com/util/LoadingPlaceholder.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {UpIcon, DownIcon} from '../../lib/icons'
+import {UpIcon} from '../../lib/icons'
 import {s, colors} from '../../lib/styles'
 
 export function LoadingPlaceholder({
@@ -93,18 +93,16 @@ export function PostLoadingPlaceholder({
             <FontAwesomeIcon
               style={s.gray3}
               icon={['far', 'comment']}
-              size={14}
+              size={16}
             />
           </View>
           <View style={s.flex1}>
-            <FontAwesomeIcon style={s.gray3} icon="retweet" size={18} />
+            <FontAwesomeIcon style={s.gray3} icon="retweet" size={20} />
           </View>
           <View style={s.flex1}>
-            <UpIcon style={s.gray3} size={18} />
-          </View>
-          <View style={s.flex1}>
-            <DownIcon style={s.gray3} size={18} />
+            <UpIcon style={s.gray3} size={19} strokeWidth={1.7} />
           </View>
+          <View style={s.flex1}></View>
         </View>
       </View>
     </View>
diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx
index a3d2085e9..144351d85 100644
--- a/src/view/com/util/PostCtrls.tsx
+++ b/src/view/com/util/PostCtrls.tsx
@@ -8,27 +8,23 @@ import Animated, {
   interpolate,
 } from 'react-native-reanimated'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {UpIcon, UpIconSolid, DownIcon, DownIconSolid} from '../../lib/icons'
+import {UpIcon, UpIconSolid} from '../../lib/icons'
 import {s, colors} from '../../lib/styles'
 
 interface PostCtrlsOpts {
   replyCount: number
   repostCount: number
   upvoteCount: number
-  downvoteCount: number
   isReposted: boolean
   isUpvoted: boolean
-  isDownvoted: boolean
   onPressReply: () => void
   onPressToggleRepost: () => void
   onPressToggleUpvote: () => void
-  onPressToggleDownvote: () => void
 }
 
 export function PostCtrls(opts: PostCtrlsOpts) {
   const interp1 = useSharedValue<number>(0)
   const interp2 = useSharedValue<number>(0)
-  const interp3 = useSharedValue<number>(0)
 
   const anim1Style = useAnimatedStyle(() => ({
     transform: [{scale: interpolate(interp1.value, [0, 1.0], [1.0, 3.0])}],
@@ -38,10 +34,6 @@ export function PostCtrls(opts: PostCtrlsOpts) {
     transform: [{scale: interpolate(interp2.value, [0, 1.0], [1.0, 3.0])}],
     opacity: interpolate(interp2.value, [0, 1.0], [1.0, 0.0]),
   }))
-  const anim3Style = useAnimatedStyle(() => ({
-    transform: [{scale: interpolate(interp3.value, [0, 1.0], [1.0, 3.0])}],
-    opacity: interpolate(interp3.value, [0, 1.0], [1.0, 0.0]),
-  }))
 
   const onPressToggleRepostWrapper = () => {
     if (!opts.isReposted) {
@@ -59,14 +51,6 @@ export function PostCtrls(opts: PostCtrlsOpts) {
     }
     opts.onPressToggleUpvote()
   }
-  const onPressToggleDownvoteWrapper = () => {
-    if (!opts.isDownvoted) {
-      interp3.value = withTiming(1, {duration: 300}, () => {
-        interp3.value = withDelay(100, withTiming(0, {duration: 20}))
-      })
-    }
-    opts.onPressToggleDownvote()
-  }
 
   return (
     <View style={styles.ctrls}>
@@ -75,9 +59,9 @@ export function PostCtrls(opts: PostCtrlsOpts) {
           <FontAwesomeIcon
             style={styles.ctrlIcon}
             icon={['far', 'comment']}
-            size={14}
+            size={16}
           />
-          <Text style={[s.gray5, s.ml5, s.f13]}>{opts.replyCount}</Text>
+          <Text style={[s.gray5, s.ml5, s.f17]}>{opts.replyCount}</Text>
         </TouchableOpacity>
       </View>
       <View style={s.flex1}>
@@ -90,14 +74,14 @@ export function PostCtrls(opts: PostCtrlsOpts) {
                 opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon
               }
               icon="retweet"
-              size={18}
+              size={20}
             />
           </Animated.View>
           <Text
             style={
               opts.isReposted
-                ? [s.bold, s.green3, s.f13, s.ml5]
-                : [s.gray5, s.f13, s.ml5]
+                ? [s.bold, s.green3, s.f17, s.ml5]
+                : [s.gray5, s.f17, s.ml5]
             }>
             {opts.repostCount}
           </Text>
@@ -109,42 +93,22 @@ export function PostCtrls(opts: PostCtrlsOpts) {
           onPress={onPressToggleUpvoteWrapper}>
           <Animated.View style={anim2Style}>
             {opts.isUpvoted ? (
-              <UpIconSolid style={styles.ctrlIconUpvoted} size={18} />
+              <UpIconSolid style={[styles.ctrlIconUpvoted]} size={19} />
             ) : (
-              <UpIcon style={styles.ctrlIcon} size={18} />
+              <UpIcon style={[styles.ctrlIcon]} size={20} strokeWidth={1.5} />
             )}
           </Animated.View>
           <Text
             style={
               opts.isUpvoted
-                ? [s.bold, s.red3, s.f13, s.ml5]
-                : [s.gray5, s.f13, s.ml5]
+                ? [s.bold, s.red3, s.f17, s.ml5]
+                : [s.gray5, s.f17, s.ml5]
             }>
             {opts.upvoteCount}
           </Text>
         </TouchableOpacity>
       </View>
-      <View style={s.flex1}>
-        <TouchableOpacity
-          style={styles.ctrl}
-          onPress={onPressToggleDownvoteWrapper}>
-          <Animated.View style={anim3Style}>
-            {opts.isDownvoted ? (
-              <DownIconSolid style={styles.ctrlIconDownvoted} size={18} />
-            ) : (
-              <DownIcon style={styles.ctrlIcon} size={18} />
-            )}
-          </Animated.View>
-          <Text
-            style={
-              opts.isDownvoted
-                ? [s.bold, s.blue3, s.f13, s.ml5]
-                : [s.gray5, s.f13, s.ml5]
-            }>
-            {opts.downvoteCount}
-          </Text>
-        </TouchableOpacity>
-      </View>
+      <View style={s.flex1}></View>
     </View>
   )
 }
@@ -152,12 +116,10 @@ export function PostCtrls(opts: PostCtrlsOpts) {
 const styles = StyleSheet.create({
   ctrls: {
     flexDirection: 'row',
-    paddingRight: 20,
   },
   ctrl: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingLeft: 4,
     paddingRight: 4,
   },
   ctrlIcon: {
@@ -169,7 +131,4 @@ const styles = StyleSheet.create({
   ctrlIconUpvoted: {
     color: colors.red3,
   },
-  ctrlIconDownvoted: {
-    color: colors.blue3,
-  },
 })
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 7e68bcd15..55a71ea26 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/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 = () => {
-    if (store.me.handle) {
-      store.nav.navigate(`/profile/${store.me.handle}`)
-    }
+  const onPressSearch = () => {
+    store.nav.navigate(`/search`)
   }
   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={onPressAvatar}>
-          <UserAvatar
-            size={24}
-            handle={store.me.handle || ''}
-            displayName={store.me.displayName}
-          />
-        </TouchableOpacity>
-      ) : (
-        <View style={styles.cornerPlaceholder} />
-      )}
+      <TouchableOpacity onPress={onPressSearch} style={styles.searchBtn}>
+        <MagnifyingGlassIcon size={17} style={styles.searchBtnIcon} />
+      </TouchableOpacity>
     </View>
   )
 }
@@ -83,8 +74,22 @@ const styles = StyleSheet.create({
   },
 
   cornerPlaceholder: {
-    width: 24,
-    height: 24,
+    width: 30,
+    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},
 })
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-12 01:22:41 +0000