[APP-708] Onboarding revamp (#939)

* Move Discover New Feeds button to the top of the MultiFeed

* add discover custom feeds to empty following page

3 files changed, 37 insertions, 4 deletions

diff --git a/src/state/models/discovery/foafs.ts b/src/state/models/discovery/foafs.ts
index 4bbd32807..4b25ed4af 100644
--- a/src/state/models/discovery/foafs.ts
+++ b/src/state/models/discovery/foafs.ts
@@ -19,7 +19,7 @@ export class FoafsModel {
   isLoading = false
   hasData = false
   sources: string[] = []
-  foafs: Map<string, ProfileViewFollows> = new Map()
+  foafs: Map<string, ProfileViewFollows> = new Map() // FOAF stands for Friend of a Friend
   popular: RefWithInfoAndFollowers[] = []
 
   constructor(public rootStore: RootStoreModel) {
diff --git a/src/view/com/posts/FollowingEmptyState.tsx b/src/view/com/posts/FollowingEmptyState.tsx
index d1843900b..4491b2526 100644
--- a/src/view/com/posts/FollowingEmptyState.tsx
+++ b/src/view/com/posts/FollowingEmptyState.tsx
@@ -27,6 +27,10 @@ export function FollowingEmptyState() {
     }
   }, [navigation])
 
+  const onPressDiscoverFeeds = React.useCallback(() => {
+    navigation.navigate('DiscoverFeeds')
+  }, [navigation])
+
   return (
     <View style={styles.emptyContainer}>
       <View style={styles.emptyIconContainer}>
@@ -48,6 +52,23 @@ export function FollowingEmptyState() {
           size={14}
         />
       </Button>
+
+      <Text type="xl-medium" style={[s.textCenter, pal.text, s.mt20]}>
+        You can also discover new Custom Feeds to follow.
+      </Text>
+      <Button
+        type="inverted"
+        style={[styles.emptyBtn, s.mt10]}
+        onPress={onPressDiscoverFeeds}>
+        <Text type="lg-medium" style={palInverted.text}>
+          Discover new custom feeds
+        </Text>
+        <FontAwesomeIcon
+          icon="angle-right"
+          style={palInverted.text as FontAwesomeIconStyle}
+          size={14}
+        />
+      </Button>
     </View>
   )
 }
diff --git a/src/view/com/posts/MultiFeed.tsx b/src/view/com/posts/MultiFeed.tsx
index dc28d2d8a..466a7a47d 100644
--- a/src/view/com/posts/MultiFeed.tsx
+++ b/src/view/com/posts/MultiFeed.tsx
@@ -142,7 +142,7 @@ export const MultiFeed = observer(function Feed({
     [showPostFollowBtn, pal],
   )
 
-  const FeedFooter = React.useCallback(
+  const ListFooter = React.useCallback(
     () =>
       multifeed.isLoading && !isRefreshing ? (
         <View style={styles.loadMore}>
@@ -154,6 +154,17 @@ export const MultiFeed = observer(function Feed({
     [multifeed.isLoading, isRefreshing, pal],
   )
 
+  const ListHeader = React.useCallback(() => {
+    return (
+      <Link style={[styles.footerLink, pal.viewLight]} href="/search/feeds">
+        <FontAwesomeIcon icon="search" size={18} color={pal.colors.text} />
+        <Text type="xl-medium" style={pal.text}>
+          Discover new feeds
+        </Text>
+      </Link>
+    )
+  }, [pal])
+
   return (
     <View testID={testID} style={style}>
       {multifeed.items.length > 0 && (
@@ -163,7 +174,8 @@ export const MultiFeed = observer(function Feed({
           data={multifeed.items}
           keyExtractor={item => item._reactKey}
           renderItem={renderItem}
-          ListFooterComponent={FeedFooter}
+          ListFooterComponent={ListFooter}
+          ListHeaderComponent={ListHeader}
           refreshControl={
             <RefreshControl
               refreshing={isRefreshing}
@@ -237,7 +249,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 14,
     paddingVertical: 12,
     marginHorizontal: 8,
-    marginBottom: 8,
+    marginVertical: 8,
     gap: 8,
   },
   loadMore: {