Add a new home feed-api wrapper and give a header indicating the fallback behavior (#2534)

* Add a new home feed-api wrapper and give a header indicating the fallback behavior

* Sneak in a quick fix: use the correct text color in the delete modal

* Use imported constant

src/view/com/modals/DeleteAccount.tsx

@@ -160,7 +160,7 @@ export function Component({}: {}) {
             {/* TODO: Update this label to be more concise */}
             <Text
               type="lg"
-              style={styles.description}
+              style={[pal.text, styles.description]}
               nativeID="confirmationCode">
               <Trans>
                 Check your inbox for an email with the confirmation code to
@@ -180,7 +180,10 @@ export function Component({}: {}) {
                 msg`Input confirmation code for account deletion`,
               )}
             />
-            <Text type="lg" style={styles.description} nativeID="password">
+            <Text
+              type="lg"
+              style={[pal.text, styles.description]}
+              nativeID="password">
               <Trans>Please enter your password as well:</Trans>
             </Text>
             <TextInput

src/view/com/posts/DiscoverFallbackHeader.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import {View} from 'react-native'
+import {Trans} from '@lingui/macro'
+import {Text} from '../util/text/Text'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {TextLink} from '../util/Link'
+import {InfoCircleIcon} from '#/lib/icons'
+
+export function DiscoverFallbackHeader() {
+  const pal = usePalette('default')
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingVertical: 12,
+          paddingHorizontal: 12,
+          borderTopWidth: 1,
+        },
+        pal.border,
+        pal.viewLight,
+      ]}>
+      <View style={{width: 68, paddingLeft: 12}}>
+        <InfoCircleIcon size={36} style={pal.textLight} strokeWidth={1.5} />
+      </View>
+      <View style={{flex: 1}}>
+        <Text type="md" style={pal.text}>
+          <Trans>
+            We ran out of posts from your follows. Here's the latest from
+          </Trans>{' '}
+          <TextLink
+            type="md-medium"
+            href="/profile/bsky.app/feed/whats-hot"
+            text="Discover"
+            style={pal.link}
+          />
+          .
+        </Text>
+      </View>
+    </View>
+  )
+}

src/view/com/posts/Feed.tsx

@@ -30,6 +30,8 @@ import {useSession} from '#/state/session'
 import {STALE} from '#/state/queries'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {DiscoverFallbackHeader} from './DiscoverFallbackHeader'
+import {FALLBACK_MARKER_POST} from '#/lib/api/feed/home'
 
 const LOADING_ITEM = {_reactKey: '__loading__'}
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
@@ -265,6 +267,12 @@ let Feed = ({
         )
       } else if (item === LOADING_ITEM) {
         return <PostFeedLoadingPlaceholder />
+      } else if (item.rootUri === FALLBACK_MARKER_POST.post.uri) {
+        // HACK
+        // tell the user we fell back to discover
+        // see home.ts (feed api) for more info
+        // -prf
+        return <DiscoverFallbackHeader />
       }
       return <FeedSlice slice={item} />
     },

src/view/screens/Home.tsx

@@ -19,7 +19,6 @@ import {useSession} from '#/state/session'
 import {loadString, saveString} from '#/lib/storage'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {clamp} from '#/lib/numbers'
-import {PROD_DEFAULT_FEED} from '#/lib/constants'
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export function HomeScreen(props: Props) {
@@ -112,7 +111,7 @@ function HomeScreenReady({
       mergeFeedEnabled: Boolean(preferences.feedViewPrefs.lab_mergeFeedEnabled),
       mergeFeedSources: preferences.feedViewPrefs.lab_mergeFeedEnabled
         ? preferences.feeds.saved
-        : [PROD_DEFAULT_FEED('whats-hot')],
+        : [],
     }
   }, [preferences])