Fix web home feed sizing and related issues (close #432) (#475)

* Fix web home feed sizing (close #432)

* Fix lint

* Fix positioning of profile not found error

* Fix load latest on mobile

* Fix overflow issues on mobile web (visible in postthread)

* Fix bottom pad on mobile web

* Remove old comment

src/lib/styles.ts

@@ -1,5 +1,6 @@
 import {StyleProp, StyleSheet, TextStyle} from 'react-native'
 import {Theme, TypographyVariant} from './ThemeContext'
+import {isMobileWeb} from 'platform/detection'
 
 // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
 export const colors = {
@@ -162,7 +163,7 @@ export const s = StyleSheet.create({
   // dimensions
   w100pct: {width: '100%'},
   h100pct: {height: '100%'},
-  hContentRegion: {height: '100%'},
+  hContentRegion: isMobileWeb ? {flex: 1} : {height: '100%'},
 
   // text align
   textLeft: {textAlign: 'left'},

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

@@ -1,30 +1,76 @@
 import React from 'react'
+import {Animated, StyleSheet} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {TabBar} from 'view/com/pager/TabBar'
-import {CenteredView} from 'view/com/util/Views'
 import {RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {FeedsTabBar as FeedsTabBarMobile} from './FeedsTabBarMobile'
 
 export const FeedsTabBar = observer(
-  (props: RenderTabBarFnProps & {onPressSelected: () => void}) => {
-    const pal = usePalette('default')
+  (
+    props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
+  ) => {
     const {isDesktop} = useWebMediaQueries()
-
     if (!isDesktop) {
       return <FeedsTabBarMobile {...props} />
+    } else {
+      return <FeedsTabBarDesktop {...props} />
     }
+  },
+)
 
+const FeedsTabBarDesktop = observer(
+  (
+    props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
+  ) => {
+    const store = useStores()
+    const pal = usePalette('default')
+    const interp = useAnimatedValue(0)
+
+    React.useEffect(() => {
+      Animated.timing(interp, {
+        toValue: store.shell.minimalShellMode ? 1 : 0,
+        duration: 100,
+        useNativeDriver: true,
+        isInteraction: false,
+      }).start()
+    }, [interp, store.shell.minimalShellMode])
+    const transform = {
+      transform: [
+        {translateX: '-50%'},
+        {translateY: Animated.multiply(interp, -100)},
+      ],
+    }
     return (
-      <CenteredView>
+      // @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf
+      <Animated.View style={[pal.view, styles.tabBar, transform]}>
         <TabBar
           {...props}
           items={['Following', "What's hot"]}
           indicatorPosition="bottom"
           indicatorColor={pal.colors.link}
         />
-      </CenteredView>
+      </Animated.View>
     )
   },
 )
+
+const styles = StyleSheet.create({
+  tabBar: {
+    position: 'absolute',
+    zIndex: 1,
+    left: '50%',
+    width: 640,
+    top: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 18,
+  },
+  tabBarAvi: {
+    marginTop: 1,
+    marginRight: 18,
+  },
+})

src/view/com/post-thread/PostThread.tsx

@@ -21,14 +21,14 @@ import {ComposePrompt} from '../composer/Prompt'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {Text} from '../util/text/Text'
 import {s} from 'lib/styles'
-import {isDesktopWeb} from 'platform/detection'
+import {isDesktopWeb, isMobileWeb} from 'platform/detection'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useNavigation} from '@react-navigation/native'
 import {NavigationProp} from 'lib/routes/types'
 
 const REPLY_PROMPT = {_reactKey: '__reply__', _isHighlightedPost: false}
-const BOTTOM_BORDER = {
-  _reactKey: '__bottom_border__',
+const BOTTOM_COMPONENT = {
+  _reactKey: '__bottom_component__',
   _isHighlightedPost: false,
 }
 type YieldedItem = PostThreadItemModel | typeof REPLY_PROMPT
@@ -48,7 +48,7 @@ export const PostThread = observer(function PostThread({
   const navigation = useNavigation<NavigationProp>()
   const posts = React.useMemo(() => {
     if (view.thread) {
-      return Array.from(flattenThread(view.thread)).concat([BOTTOM_BORDER])
+      return Array.from(flattenThread(view.thread)).concat([BOTTOM_COMPONENT])
     }
     return []
   }, [view.thread])
@@ -103,12 +103,23 @@ export const PostThread = observer(function PostThread({
     ({item}: {item: YieldedItem}) => {
       if (item === REPLY_PROMPT) {
         return <ComposePrompt onPressCompose={onPressReply} />
-      } else if (item === BOTTOM_BORDER) {
+      } else if (item === BOTTOM_COMPONENT) {
         // HACK
         // due to some complexities with how flatlist works, this is the easiest way
         // I could find to get a border positioned directly under the last item
+        // -
+        // addendum -- it's also the best way to get mobile web to add padding
+        // at the bottom of the thread since paddingbottom is ignored. yikes.
         // -prf
-        return <View style={[styles.bottomBorder, pal.border]} />
+        return (
+          <View
+            style={[
+              styles.bottomBorder,
+              pal.border,
+              isMobileWeb && styles.bottomSpacer,
+            ]}
+          />
+        )
       } else if (item instanceof PostThreadItemModel) {
         return <PostThreadItem item={item} onPostReply={onRefresh} />
       }
@@ -224,4 +235,7 @@ const styles = StyleSheet.create({
   bottomBorder: {
     borderBottomWidth: 1,
   },
+  bottomSpacer: {
+    height: 200,
+  },
 })

src/view/com/util/Views.web.tsx

@@ -35,6 +35,8 @@ export function CenteredView({
 export const FlatList = React.forwardRef(function <ItemT>(
   {
     contentContainerStyle,
+    style,
+    contentOffset,
     ...props
   }: React.PropsWithChildren<FlatListProps<ItemT>>,
   ref: React.Ref<RNFlatList>,
@@ -43,10 +45,25 @@ export const FlatList = React.forwardRef(function <ItemT>(
     contentContainerStyle,
     styles.containerScroll,
   )
+  if (contentOffset && contentOffset?.y !== 0) {
+    // NOTE
+    // we use paddingTop & contentOffset to space around the floating header
+    // but reactnative web puts the paddingTop on the wrong element (style instead of the contentContainer)
+    // so we manually correct it here
+    // -prf
+    style = addStyle(style, {
+      paddingTop: 0,
+    })
+    contentContainerStyle = addStyle(contentContainerStyle, {
+      paddingTop: Math.abs(contentOffset.y),
+    })
+  }
   return (
     <RNFlatList
-      contentContainerStyle={contentContainerStyle}
       ref={ref}
+      contentContainerStyle={contentContainerStyle}
+      style={style}
+      contentOffset={contentOffset}
       {...props}
     />
   )

src/view/com/util/error/ErrorScreen.tsx

@@ -8,6 +8,7 @@ import {Text} from '../text/Text'
 import {colors} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
+import {CenteredView} from '../Views'
 
 export function ErrorScreen({
   title,
@@ -25,7 +26,7 @@ export function ErrorScreen({
   const theme = useTheme()
   const pal = usePalette('error')
   return (
-    <View testID={testID} style={[styles.outer, pal.view]}>
+    <CenteredView testID={testID} style={[styles.outer, pal.view]}>
       <View style={styles.errorIconContainer}>
         <View
           style={[
@@ -72,7 +73,7 @@ export function ErrorScreen({
           </TouchableOpacity>
         </View>
       )}
-    </View>
+    </CenteredView>
   )
 }
 

src/view/com/util/load-latest/LoadLatestBtn.tsx

@@ -0,0 +1 @@
+export * from './LoadLatestBtnMobile'

src/view/com/util/load-latest/LoadLatestBtn.web.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity} from 'react-native'
-import {Text} from './text/Text'
+import {Text} from '../text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {UpIcon} from 'lib/icons'
+import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
+import {isMobileWeb} from 'platform/detection'
 
 const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
 
@@ -14,6 +16,9 @@ export const LoadLatestBtn = ({
   label: string
 }) => {
   const pal = usePalette('default')
+  if (isMobileWeb) {
+    return <LoadLatestBtnMobile onPress={onPress} label={label} />
+  }
   return (
     <TouchableOpacity
       style={[pal.view, pal.borderDark, styles.loadLatest]}

src/view/com/util/load-latest/LoadLatestBtnMobile.tsx

@@ -3,7 +3,7 @@ import {StyleSheet, TouchableOpacity} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import LinearGradient from 'react-native-linear-gradient'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {Text} from './text/Text'
+import {Text} from '../text/Text'
 import {colors, gradients} from 'lib/styles'
 import {clamp} from 'lodash'
 import {useStores} from 'state/index'

src/view/screens/Home.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {FlatList, View, Platform} 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'
@@ -8,7 +8,7 @@ import {PostsFeedModel} from 'state/models/feeds/posts'
 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 {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn'
 import {FeedsTabBar} from '../com/pager/FeedsTabBar'
 import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {FAB} from '../com/util/fab/FAB'
@@ -17,9 +17,9 @@ import {s} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'
 import {ComposeIcon2} from 'lib/icons'
-import {isDesktopWeb, isMobileWeb} from 'platform/detection'
+import {isDesktopWeb} from 'platform/detection'
 
-const HEADER_OFFSET = isDesktopWeb ? 0 : isMobileWeb ? 20 : 40
+const HEADER_OFFSET = isDesktopWeb ? 50 : 40
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired((_opts: Props) => {
@@ -191,7 +191,7 @@ const FeedPage = observer(
           onPressTryAgain={onPressTryAgain}
           onScroll={onMainScroll}
           renderEmptyState={renderEmptyState}
-          headerOffset={Platform.OS === 'web' ? 0 : HEADER_OFFSET} // only offset on mobile
+          headerOffset={HEADER_OFFSET}
         />
         {feed.hasNewLatest && !feed.isRefreshing && (
           <LoadLatestBtn onPress={onPressLoadLatest} label="posts" />

src/view/screens/Notifications.tsx

@@ -10,7 +10,7 @@ import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/notifications/Feed'
 import {InvitedUsers} from '../com/notifications/InvitedUsers'
-import {LoadLatestBtn} from 'view/com/util/LoadLatestBtn'
+import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
 import {useStores} from 'state/index'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {s} from 'lib/styles'