Move the feed selector to the header (#352)

* Reorg pager components into their own folder

* Move the feed selector to the header

* Fix lint

src/view/com/pager/FeedsTabBar.tsx

@@ -1,51 +1,44 @@
 import React from 'react'
-import {Animated, StyleSheet} from 'react-native'
+import {Animated, StyleSheet, TouchableOpacity} from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {TabBar} from 'view/com/util/TabBar'
+import {TabBar} from 'view/com/pager/TabBar'
-import {RenderTabBarFnProps} from 'view/com/util/pager/Pager'
+import {RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
-import {clamp} from 'lodash'
-
-const BOTTOM_BAR_HEIGHT = 48
 
 export const FeedsTabBar = observer(
   (props: RenderTabBarFnProps & {onPressSelected: () => void}) => {
     const store = useStores()
-    const safeAreaInsets = useSafeAreaInsets()
     const pal = usePalette('default')
     const interp = useAnimatedValue(0)
 
-    const pad = React.useMemo(
-      () => ({
-        paddingBottom: clamp(safeAreaInsets.bottom, 15, 20),
-      }),
-      [safeAreaInsets],
-    )
-
     React.useEffect(() => {
       Animated.timing(interp, {
-        toValue: store.shell.minimalShellMode ? 0 : 1,
+        toValue: store.shell.minimalShellMode ? 1 : 0,
         duration: 100,
         useNativeDriver: true,
         isInteraction: false,
       }).start()
     }, [interp, store.shell.minimalShellMode])
     const transform = {
-      transform: [
+      transform: [{translateY: Animated.multiply(interp, -100)}],
-        {translateY: Animated.multiply(interp, -1 * BOTTOM_BAR_HEIGHT)},
-      ],
     }
 
+    const onPressAvi = React.useCallback(() => {
+      store.shell.openDrawer()
+    }, [store])
+
     return (
-      <Animated.View
+      <Animated.View style={[pal.view, styles.tabBar, transform]}>
-        style={[pal.view, pal.border, styles.tabBar, pad, transform]}>
+        <TouchableOpacity style={styles.tabBarAvi} onPress={onPressAvi}>
+          <UserAvatar avatar={store.me.avatar} size={30} />
+        </TouchableOpacity>
         <TabBar
           {...props}
           items={['Following', "What's hot"]}
-          indicatorPosition="top"
+          indicatorPosition="bottom"
           indicatorColor={pal.colors.link}
         />
       </Animated.View>
@@ -56,17 +49,16 @@ export const FeedsTabBar = observer(
 const styles = StyleSheet.create({
   tabBar: {
     position: 'absolute',
+    zIndex: 1,
     left: 0,
     right: 0,
-    bottom: 0,
+    top: 0,
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 10,
+    paddingHorizontal: 18,
-    borderTopWidth: 1,
-    paddingTop: 0,
-    paddingBottom: 30,
   },
   tabBarAvi: {
-    marginRight: 4,
+    marginTop: 1,
+    marginRight: 18,
   },
 })

src/view/com/pager/FeedsTabBar.web.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
-import {TabBar} from 'view/com/util/TabBar'
+import {TabBar} from 'view/com/pager/TabBar'
 import {CenteredView} from 'view/com/util/Views'
-import {RenderTabBarFnProps} from 'view/com/util/pager/Pager'
+import {RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {usePalette} from 'lib/hooks/usePalette'
 
 export const FeedsTabBar = observer(

src/view/com/pager/TabBar.tsx

@@ -5,7 +5,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
-import {Text} from './text/Text'
+import {Text} from '../util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isDesktopWeb} from 'platform/detection'
 

src/view/com/posts/Feed.tsx

@@ -8,9 +8,8 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {CenteredView, FlatList} from '../util/Views'
+import {FlatList} from '../util/Views'
 import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
-import {ViewHeader} from '../util/ViewHeader'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {FeedModel} from 'state/models/feed-view'
 import {FeedSlice} from './FeedSlice'
@@ -19,9 +18,9 @@ import {s} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 
-const HEADER_ITEM = {_reactKey: '__header__'}
+const LOADING_ITEM = {_reactKey: '__loading__'}
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
-const ERROR_FEED_ITEM = {_reactKey: '__error__'}
+const ERROR_ITEM = {_reactKey: '__error__'}
 
 export const Feed = observer(function Feed({
   feed,
@@ -49,19 +48,21 @@ export const Feed = observer(function Feed({
   const [isRefreshing, setIsRefreshing] = React.useState(false)
 
   const data = React.useMemo(() => {
-    let feedItems: any[] = [HEADER_ITEM]
+    let feedItems: any[] = []
     if (feed.hasLoaded) {
       if (feed.hasError) {
-        feedItems = feedItems.concat([ERROR_FEED_ITEM])
+        feedItems = feedItems.concat([ERROR_ITEM])
       }
       if (feed.isEmpty) {
         feedItems = feedItems.concat([EMPTY_FEED_ITEM])
       } else {
         feedItems = feedItems.concat(feed.slices)
       }
+    } else if (feed.isLoading) {
+      feedItems = feedItems.concat([LOADING_ITEM])
     }
     return feedItems
-  }, [feed.hasError, feed.hasLoaded, feed.isEmpty, feed.slices])
+  }, [feed.hasError, feed.hasLoaded, feed.isLoading, feed.isEmpty, feed.slices])
 
   // events
   // =
@@ -96,15 +97,15 @@ export const Feed = observer(function Feed({
           return renderEmptyState()
         }
         return <View />
-      } else if (item === ERROR_FEED_ITEM) {
+      } else if (item === ERROR_ITEM) {
         return (
           <ErrorMessage
             message={feed.error}
             onPressTryAgain={onPressTryAgain}
           />
         )
-      } else if (item === HEADER_ITEM) {
+      } else if (item === LOADING_ITEM) {
-        return <ViewHeader title="Bluesky" canGoBack={false} />
+        return <PostFeedLoadingPlaceholder />
       }
       return <FeedSlice slice={item} showFollowBtn={showPostFollowBtn} />
     },
@@ -125,11 +126,6 @@ export const Feed = observer(function Feed({
 
   return (
     <View testID={testID} style={style}>
-      {feed.isLoading && data.length === 0 && (
-        <CenteredView style={{paddingTop: headerOffset}}>
-          <PostFeedLoadingPlaceholder />
-        </CenteredView>
-      )}
       {data.length > 0 && (
         <FlatList
           ref={scrollElRef}

src/view/com/search/SearchResults.tsx

@@ -3,8 +3,8 @@ import {StyleSheet, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {SearchUIModel} from 'state/models/ui/search'
 import {CenteredView, ScrollView} from '../util/Views'
-import {Pager, RenderTabBarFnProps} from 'view/com/util/pager/Pager'
+import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
-import {TabBar} from 'view/com/util/TabBar'
+import {TabBar} from 'view/com/pager/TabBar'
 import {Post} from 'view/com/post/Post'
 import {ProfileCardWithFollowBtn} from 'view/com/profile/ProfileCard'
 import {

src/view/screens/Home.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {FlatList, View, useWindowDimensions} from 'react-native'
+import {FlatList, View} from 'react-native'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 import {observer} from 'mobx-react-lite'
 import useAppState from 'react-native-appstate-hook'
@@ -9,17 +9,16 @@ import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {Feed} from '../com/posts/Feed'
 import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
 import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
-import {FeedsTabBar} from './home/FeedsTabBar'
+import {FeedsTabBar} from '../com/pager/FeedsTabBar'
-import {Pager, RenderTabBarFnProps} from 'view/com/util/pager/Pager'
+import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {FAB} from '../com/util/FAB'
 import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'
 import {ComposeIcon2} from 'lib/icons'
-import {isDesktopWeb} from 'platform/detection'
 
-const TAB_BAR_HEIGHT = 82
+const HEADER_OFFSET = 40
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired((_opts: Props) => {
@@ -69,7 +68,7 @@ export const HomeScreen = withAuthRequired((_opts: Props) => {
     <Pager
       onPageSelected={onPageSelected}
       renderTabBar={renderTabBar}
-      tabBarPosition={isDesktopWeb ? 'top' : 'bottom'}
+      tabBarPosition="top"
       initialPage={initialPage}>
       <FeedPage
         key="1"
@@ -100,11 +99,6 @@ const FeedPage = observer(
       onForeground: () => doPoll(true),
     })
     const isScreenFocused = useIsFocused()
-    const winDim = useWindowDimensions()
-    const containerStyle = React.useMemo(
-      () => ({height: winDim.height - (isDesktopWeb ? 0 : TAB_BAR_HEIGHT)}),
-      [winDim],
-    )
 
     const doPoll = React.useCallback(
       (knownActive = false) => {
@@ -125,7 +119,7 @@ const FeedPage = observer(
     )
 
     const scrollToTop = React.useCallback(() => {
-      scrollElRef.current?.scrollToOffset({offset: 0})
+      scrollElRef.current?.scrollToOffset({offset: -HEADER_OFFSET})
     }, [scrollElRef])
 
     const onSoftReset = React.useCallback(() => {
@@ -169,7 +163,7 @@ const FeedPage = observer(
     }, [feed, scrollToTop])
 
     return (
-      <View style={containerStyle}>
+      <View style={s.h100pct}>
         <Feed
           testID="homeFeed"
           key="default"
@@ -180,6 +174,7 @@ const FeedPage = observer(
           onPressTryAgain={onPressTryAgain}
           onScroll={onMainScroll}
           renderEmptyState={renderEmptyState}
+          headerOffset={HEADER_OFFSET}
         />
         {feed.hasNewLatest && !feed.isRefreshing && (
           <LoadLatestBtn onPress={onPressLoadLatest} />

src/view/shell/BottomBar.tsx

@@ -34,24 +34,23 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
   const minimalShellInterp = useAnimatedValue(0)
   const safeAreaInsets = useSafeAreaInsets()
   const {track} = useAnalytics()
-  const {isAtHome, isAtSearch, isAtNotifications, noBorder} =
+  const {isAtHome, isAtSearch, isAtNotifications} = useNavigationState(
-    useNavigationState(state => {
+    state => {
       const res = {
         isAtHome: getTabState(state, 'Home') !== TabState.Outside,
         isAtSearch: getTabState(state, 'Search') !== TabState.Outside,
         isAtNotifications:
           getTabState(state, 'Notifications') !== TabState.Outside,
-        noBorder: getTabState(state, 'Home') === TabState.InsideAtRoot,
       }
       if (!res.isAtHome && !res.isAtNotifications && !res.isAtSearch) {
         // HACK for some reason useNavigationState will give us pre-hydration results
         //      and not update after, so we force isAtHome if all came back false
         //      -prf
         res.isAtHome = true
-        res.noBorder = true
       }
       return res
-    })
+    },
+  )
 
   React.useEffect(() => {
     if (store.shell.minimalShellMode) {
@@ -107,7 +106,6 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
     <Animated.View
       style={[
         styles.bottomBar,
-        noBorder && styles.noBorder,
         pal.view,
         pal.border,
         {paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
@@ -222,9 +220,6 @@ const styles = StyleSheet.create({
     paddingLeft: 5,
     paddingRight: 10,
   },
-  noBorder: {
-    borderTopWidth: 0,
-  },
   ctrl: {
     flex: 1,
     paddingTop: 13,