1 files changed, 77 insertions, 10 deletions

diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 33cc2e110..60cda31db 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import {FlatList, View} from 'react-native'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
 import {AppBskyFeedGetFeed as GetCustomFeed} from '@atproto/api'
 import {observer} from 'mobx-react-lite'
 import useAppState from 'react-native-appstate-hook'
@@ -8,6 +10,7 @@ import isEqual from 'lodash.isequal'
 import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
 import {PostsFeedModel} from 'state/models/feeds/posts'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
+import {TextLink} from 'view/com/util/Link'
 import {Feed} from '../com/posts/Feed'
 import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
 import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
@@ -16,14 +19,16 @@ import {FeedsTabBar} from '../com/pager/FeedsTabBar'
 import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {FAB} from '../com/util/fab/FAB'
 import {useStores} from 'state/index'
-import {s} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s, colors} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {ComposeIcon2} from 'lib/icons'
 
 const HEADER_OFFSET_MOBILE = 78
-const HEADER_OFFSET_DESKTOP = 50
+const HEADER_OFFSET_TABLET = 50
+const HEADER_OFFSET_DESKTOP = 0
 const POLL_FREQ = 30e3 // 30sec
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
@@ -154,17 +159,23 @@ const FeedPage = observer(function FeedPageImpl({
   renderEmptyState?: () => JSX.Element
 }) {
   const store = useStores()
-  const {isMobile} = useWebMediaQueries()
+  const pal = usePalette('default')
+  const {isMobile, isTablet, isDesktop} = useWebMediaQueries()
   const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store)
   const {screen, track} = useAnalytics()
   const [headerOffset, setHeaderOffset] = React.useState(
-    isMobile ? HEADER_OFFSET_MOBILE : HEADER_OFFSET_DESKTOP,
+    isMobile
+      ? HEADER_OFFSET_MOBILE
+      : isTablet
+      ? HEADER_OFFSET_TABLET
+      : HEADER_OFFSET_DESKTOP,
   )
   const scrollElRef = React.useRef<FlatList>(null)
   const {appState} = useAppState({
     onForeground: () => doPoll(true),
   })
   const isScreenFocused = useIsFocused()
+  const hasNew = feed.hasNewLatest && !feed.isRefreshing
 
   React.useEffect(() => {
     // called on first load
@@ -205,8 +216,14 @@ const FeedPage = observer(function FeedPageImpl({
 
   // listens for resize events
   React.useEffect(() => {
-    setHeaderOffset(isMobile ? HEADER_OFFSET_MOBILE : HEADER_OFFSET_DESKTOP)
-  }, [isMobile])
+    setHeaderOffset(
+      isMobile
+        ? HEADER_OFFSET_MOBILE
+        : isTablet
+        ? HEADER_OFFSET_TABLET
+        : HEADER_OFFSET_DESKTOP,
+    )
+  }, [isMobile, isTablet])
 
   // fires when page within screen is activated/deactivated
   // - check for latest
@@ -222,9 +239,6 @@ const FeedPage = observer(function FeedPageImpl({
     screen('Feed')
     store.log.debug('HomeScreen: Updating feed')
     feed.checkForLatest()
-    if (feed.hasContent) {
-      feed.update()
-    }
 
     return () => {
       clearInterval(pollInterval)
@@ -247,7 +261,59 @@ const FeedPage = observer(function FeedPageImpl({
     feed.refresh()
   }, [feed, scrollToTop])
 
-  const hasNew = feed.hasNewLatest && !feed.isRefreshing
+  const ListHeaderComponent = React.useCallback(() => {
+    if (isDesktop) {
+      return (
+        <View
+          style={[
+            pal.view,
+            {
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              paddingHorizontal: 18,
+              paddingVertical: 12,
+            },
+          ]}>
+          <TextLink
+            type="title-lg"
+            href="/"
+            style={[pal.text, {fontWeight: 'bold'}]}
+            text={
+              <>
+                {store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
+                {hasNew && (
+                  <View
+                    style={{
+                      top: -8,
+                      backgroundColor: colors.blue3,
+                      width: 8,
+                      height: 8,
+                      borderRadius: 4,
+                    }}
+                  />
+                )}
+              </>
+            }
+            onPress={() => store.emitScreenSoftReset()}
+          />
+          <TextLink
+            type="title-lg"
+            href="/settings/home-feed"
+            style={{fontWeight: 'bold'}}
+            text={
+              <FontAwesomeIcon
+                icon="sliders"
+                style={pal.textLight as FontAwesomeIconStyle}
+              />
+            }
+          />
+        </View>
+      )
+    }
+    return <></>
+  }, [isDesktop, pal, store, hasNew])
+
   return (
     <View testID={testID} style={s.h100pct}>
       <Feed
@@ -259,6 +325,7 @@ const FeedPage = observer(function FeedPageImpl({
         onScroll={onMainScroll}
         scrollEventThrottle={100}
         renderEmptyState={renderEmptyState}
+        ListHeaderComponent={ListHeaderComponent}
         headerOffset={headerOffset}
       />
       {(isScrolledDown || hasNew) && (