diff --git a/src/components/FeedEnd.tsx b/src/components/FeedEnd.tsx
new file mode 100644
index 0000000000..5c0cb1a350
--- /dev/null
+++ b/src/components/FeedEnd.tsx
@@ -0,0 +1,129 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useNavigationDeduped} from '#/lib/hooks/useNavigationDeduped'
+import {isNative} from '#/platform/detection'
+import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
+import {useTrendingConfig} from '#/state/trending-config'
+import {atoms as a, useBreakpoints,useGutters, useTheme, web} from '#/alf'
+import {Button, ButtonIcon,ButtonText} from '#/components/Button'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
+import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
+import {
+ TrendingTopic,
+ TrendingTopicLink,
+ TrendingTopicSkeleton,
+} from '#/components/TrendingTopics'
+import {Text} from '#/components/Typography'
+
+const TRENDS_COUNT = 9
+
+export function FeedEnd() {
+ const t = useTheme()
+ const {_} = useLingui()
+ const gutters = useGutters(['wide'])
+ const {enabled} = useTrendingConfig()
+ const navigation = useNavigationDeduped()
+ const {gtTablet} = useBreakpoints()
+
+ const onPressExplore = React.useCallback(() => {
+ if (isNative) {
+ navigation.navigate('SearchTab')
+ navigation.popToTop()
+ } else {
+ navigation.navigate('Search', {})
+ }
+ }, [navigation])
+
+ return (
+
+
+
+ That's it! You've reached the end of this feed.
+
+
+
+
+
+ {enabled && !gtTablet ? : null}
+
+ )
+}
+
+function Trending() {
+ const t = useTheme()
+ const {data: trending, error, isLoading} = useTrendingTopics()
+ const noTopics = !isLoading && !error && !trending?.topics?.length
+ const {gtMobile} = useBreakpoints()
+
+ return error || noTopics ? null : (
+
+
+
+ Check out what's trending
+
+
+
+
+
+ {isLoading ? (
+ Array(TRENDS_COUNT)
+ .fill(0)
+ .map((_n, i) => (
+
+ ))
+ ) : !trending?.topics ? null : (
+ <>
+ {trending.topics.slice(0, TRENDS_COUNT).map(topic => (
+
+ {({hovered}) => (
+
+ )}
+
+ ))}
+ >
+ )}
+
+
+ )
+}
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 59b2967308..e460aef5dc 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -25,10 +25,8 @@ import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
import {FeedPage} from '#/view/com/feeds/FeedPage'
import {HomeHeader} from '#/view/com/home/HomeHeader'
import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager'
-import {CustomFeedEmptyState} from '#/view/com/posts/CustomFeedEmptyState'
-import {FollowingEmptyState} from '#/view/com/posts/FollowingEmptyState'
-import {FollowingEndOfFeed} from '#/view/com/posts/FollowingEndOfFeed'
import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned'
+import {FeedEnd} from '#/components/FeedEnd'
import * as Layout from '#/components/Layout'
type Props = NativeStackScreenProps
@@ -192,14 +190,6 @@ function HomeScreenReady({
[onPressSelected, pinnedFeedInfos],
)
- const renderFollowingEmptyState = React.useCallback(() => {
- return
- }, [])
-
- const renderCustomFeedEmptyState = React.useCallback(() => {
- return
- }, [])
-
const homeFeedParams = React.useMemo(() => {
return {
mergeFeedEnabled: Boolean(preferences.feedViewPrefs.lab_mergeFeedEnabled),
@@ -232,8 +222,8 @@ function HomeScreenReady({
isPageAdjacent={Math.abs(selectedIndex - index) === 1}
feed={feed}
feedParams={homeFeedParams}
- renderEmptyState={renderFollowingEmptyState}
- renderEndOfFeed={FollowingEndOfFeed}
+ renderEmptyState={FeedEnd}
+ renderEndOfFeed={FeedEnd}
/>
)
}
@@ -245,8 +235,9 @@ function HomeScreenReady({
isPageFocused={selectedFeed === feed}
isPageAdjacent={Math.abs(selectedIndex - index) === 1}
feed={feed}
- renderEmptyState={renderCustomFeedEmptyState}
+ renderEmptyState={FeedEnd}
savedFeedConfig={savedFeedConfig}
+ renderEndOfFeed={FeedEnd}
/>
)
})
@@ -265,7 +256,7 @@ function HomeScreenReady({
isPageFocused
isPageAdjacent={false}
feed={`feedgen|${PROD_DEFAULT_FEED('whats-hot')}`}
- renderEmptyState={renderCustomFeedEmptyState}
+ renderEmptyState={FeedEnd}
/>
)