Another set of UI updates (FAB returns, a few others) (#281)

* Bring back the FAB and move compose out of the footer

* Increase the touch target sizes of the header back btns (close #279)

* Trigger 'load more' sooner (close #280)

src/lib/icons.tsx

@@ -665,37 +665,21 @@ export function ComposeIcon2({
   style,
   size,
   strokeWidth = 1.5,
-  backgroundColor,
 }: {
   style?: StyleProp<TextStyle>
   size?: string | number
   strokeWidth?: number
-  backgroundColor: string
 }) {
   return (
     <Svg
       viewBox="0 0 24 24"
-      strokeWidth={strokeWidth}
       stroke="currentColor"
       width={size || 24}
       height={size || 24}
       style={style}>
-      <Rect
+      <Path
+        d="M 20 9 L 20 16 C 20 18.209 18.209 20 16 20 L 8 20 C 5.791 20 4 18.209 4 16 L 4 8 C 4 5.791 5.791 4 8 4 L 15 4"
         strokeWidth={strokeWidth}
-        x="4"
-        y="4"
-        width="16"
-        height="16"
-        rx="4"
-        ry="4"
-      />
-      <Line
-        x1="10"
-        y1="14"
-        x2="22"
-        y2="2"
-        strokeWidth={strokeWidth * 4}
-        stroke={backgroundColor}
       />
       <Line
         strokeLinecap="round"

src/view/com/notifications/Feed.tsx

@@ -101,6 +101,7 @@ export const Feed = observer(function Feed({
           refreshing={view.isRefreshing}
           onRefresh={onRefresh}
           onEndReached={onEndReached}
+          onEndReachedThreshold={0.6}
           onScroll={onScroll}
           contentContainerStyle={s.contentContainer}
         />

src/view/com/posts/Feed.tsx

@@ -168,7 +168,7 @@ export const Feed = observer(function Feed({
           onScroll={onScroll}
           onRefresh={onRefresh}
           onEndReached={onEndReached}
-          onEndReachedThreshold={0.25}
+          onEndReachedThreshold={0.6}
           removeClippedSubviews={true}
           contentInset={{top: headerOffset}}
           contentOffset={{x: 0, y: headerOffset * -1}}

src/view/com/profile/ProfileHeader.tsx

@@ -29,6 +29,8 @@ import {UserBanner} from '../util/UserBanner'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics'
 
+const BACK_HITSLOP = {left: 30, top: 30, right: 30, bottom: 30}
+
 export const ProfileHeader = observer(function ProfileHeader({
   view,
   onRefreshAll,
@@ -285,10 +287,12 @@ export const ProfileHeader = observer(function ProfileHeader({
           </View>
         ) : undefined}
       </View>
-      <TouchableWithoutFeedback onPress={onPressBack}>
+      <TouchableWithoutFeedback onPress={onPressBack} hitSlop={BACK_HITSLOP}>
-        <BlurView style={styles.backBtn} blurType="dark">
+        <View style={styles.backBtnWrapper}>
-          <FontAwesomeIcon size={18} icon="angle-left" style={s.white} />
+          <BlurView style={styles.backBtn} blurType="dark">
-        </BlurView>
+            <FontAwesomeIcon size={18} icon="angle-left" style={s.white} />
+          </BlurView>
+        </View>
       </TouchableWithoutFeedback>
       <TouchableWithoutFeedback
         testID="profileHeaderAviButton"
@@ -312,12 +316,16 @@ const styles = StyleSheet.create({
     width: '100%',
     height: 120,
   },
-  backBtn: {
+  backBtnWrapper: {
     position: 'absolute',
     top: 10,
     left: 10,
     width: 30,
     height: 30,
+  },
+  backBtn: {
+    width: 30,
+    height: 30,
     borderRadius: 15,
     alignItems: 'center',
     justifyContent: 'center',

src/view/com/util/FAB.tsx

@@ -7,9 +7,7 @@ import {
   TouchableWithoutFeedback,
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {gradients} from 'lib/styles'
-import {IconProp} from '@fortawesome/fontawesome-svg-core'
-import {colors, gradients} from 'lib/styles'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {useStores} from 'state/index'
 
@@ -21,7 +19,7 @@ export const FAB = observer(
     onPress,
   }: {
     testID?: string
-    icon: IconProp
+    icon: JSX.Element
     onPress: OnPress
   }) => {
     const store = useStores()
@@ -45,7 +43,7 @@ export const FAB = observer(
             start={{x: 0, y: 0}}
             end={{x: 1, y: 1}}
             style={styles.inner}>
-            <FontAwesomeIcon size={24} icon={icon} color={colors.white} />
+            {icon}
           </LinearGradient>
         </Animated.View>
       </TouchableWithoutFeedback>
@@ -57,7 +55,7 @@ const styles = StyleSheet.create({
   outer: {
     position: 'absolute',
     zIndex: 1,
-    right: 22,
+    right: 28,
     bottom: 94,
     width: 60,
     height: 60,

src/view/com/util/ViewHeader.tsx

@@ -10,7 +10,7 @@ import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {useAnalytics} from 'lib/analytics'
 import {isDesktopWeb} from '../../../platform/detection'
 
-const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
+const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 
 export const ViewHeader = observer(function ViewHeader({
   title,

src/view/com/util/ViewSelector.tsx

@@ -100,6 +100,7 @@ export function ViewSelector({
         onScroll={onScroll}
         onRefresh={onRefresh}
         onEndReached={onEndReached}
+        onEndReachedThreshold={0.6}
         contentContainerStyle={s.contentContainer}
         removeClippedSubviews={true}
       />

src/view/screens/Home.tsx

@@ -6,18 +6,21 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/posts/Feed'
 import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
 import {WelcomeBanner} from '../com/util/WelcomeBanner'
+import {FAB} from '../com/util/FAB'
 import {useStores} from 'state/index'
 import {ScreenParams} from '../routes'
-import {s} from 'lib/styles'
+import {s, colors} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {ComposeIcon2} from 'lib/icons'
 
 const HEADER_HEIGHT = 42
 
 export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
   const store = useStores()
   const onMainScroll = useOnMainScroll(store)
-  const {screen} = useAnalytics()
+  const {screen, track} = useAnalytics()
   const scrollElRef = React.useRef<FlatList>(null)
   const [wasVisible, setWasVisible] = React.useState<boolean>(false)
   const {appState} = useAppState({
@@ -84,13 +87,17 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
     screen,
   ])
 
-  const onPressTryAgain = () => {
+  const onPressCompose = React.useCallback(() => {
+    track('HomeScreen:PressCompose')
+    store.shell.openComposer({})
+  }, [store, track])
+  const onPressTryAgain = React.useCallback(() => {
     store.me.mainFeed.refresh()
-  }
+  }, [store])
-  const onPressLoadLatest = () => {
+  const onPressLoadLatest = React.useCallback(() => {
     store.me.mainFeed.refresh()
     scrollToTop()
-  }
+  }, [store, scrollToTop])
 
   return (
     <View style={s.hContentRegion}>
@@ -112,6 +119,11 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
       {store.me.mainFeed.hasNewLatest && !store.me.mainFeed.isRefreshing && (
         <LoadLatestBtn onPress={onPressLoadLatest} />
       )}
+      <FAB
+        testID="composeFAB"
+        onPress={onPressCompose}
+        icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
+      />
     </View>
   )
 })

src/view/screens/Profile.tsx

@@ -13,9 +13,11 @@ import {ErrorScreen} from '../com/util/error/ErrorScreen'
 import {ErrorMessage} from '../com/util/error/ErrorMessage'
 import {EmptyState} from '../com/util/EmptyState'
 import {Text} from '../com/util/text/Text'
+import {FAB} from '../com/util/FAB'
 import {s, colors} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'
+import {ComposeIcon2} from 'lib/icons'
 
 const LOADING_ITEM = {_reactKey: '__loading__'}
 const END_ITEM = {_reactKey: '__end__'}
@@ -23,7 +25,7 @@ const EMPTY_ITEM = {_reactKey: '__empty__'}
 
 export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
-  const {screen} = useAnalytics()
+  const {screen, track} = useAnalytics()
 
   useEffect(() => {
     screen('Profile')
@@ -65,6 +67,10 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
   // events
   // =
 
+  const onPressCompose = React.useCallback(() => {
+    track('ProfileScreen:PressCompose')
+    store.shell.openComposer({})
+  }, [store, track])
   const onSelectView = (index: number) => {
     uiState.setSelectedViewIndex(index)
   }
@@ -186,6 +192,11 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
       ) : (
         <CenteredView>{renderHeader()}</CenteredView>
       )}
+      <FAB
+        testID="composeFAB"
+        onPress={onPressCompose}
+        icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
+      />
     </View>
   )
 })

src/view/shell/mobile/BottomBar.tsx

@@ -19,7 +19,6 @@ import {
   HomeIconSolid,
   MagnifyingGlassIcon2,
   MagnifyingGlassIcon2Solid,
-  ComposeIcon2,
   BellIcon,
   BellIconSolid,
   UserIcon,
@@ -85,10 +84,6 @@ export const BottomBar = observer(() => {
       }
     }
   }, [store, track])
-  const onPressCompose = React.useCallback(() => {
-    track('MobileShell:ComposeButtonPressed')
-    store.shell.openComposer({})
-  }, [store, track])
   const onPressNotifications = React.useCallback(() => {
     track('MobileShell:NotificationsButtonPressed')
     if (store.nav.tab.fixedTabPurpose === TabPurpose.Notifs) {
@@ -161,19 +156,6 @@ export const BottomBar = observer(() => {
         }
         onPress={onPressSearch}
       />
-      <Btn
-        icon={
-          <View style={styles.ctrlIconSizingWrapper}>
-            <ComposeIcon2
-              strokeWidth={1.5}
-              size={29}
-              style={[styles.ctrlIcon, pal.text, styles.composeIcon]}
-              backgroundColor={pal.colors.background}
-            />
-          </View>
-        }
-        onPress={onPressCompose}
-      />
       <Btn
         icon={
           isAtNotifications ? (
@@ -254,7 +236,7 @@ const styles = StyleSheet.create({
   },
   notificationCount: {
     position: 'absolute',
-    left: '56%',
+    left: '52%',
     top: 10,
     backgroundColor: colors.blue3,
     paddingHorizontal: 4,
@@ -283,9 +265,6 @@ const styles = StyleSheet.create({
   bellIcon: {
     top: -2.5,
   },
-  composeIcon: {
-    top: -4.5,
-  },
   profileIcon: {
     top: -4,
   },