Merge branch 'simplify' into main

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...',

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>

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,
-  },
 })

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},
 })