add top bar and link to new SavedScreen

4 files changed, 85 insertions, 28 deletions

diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx
index 5954e7f2e..ff922d446 100644
--- a/src/view/com/pager/FeedsTabBarMobile.tsx
+++ b/src/view/com/pager/FeedsTabBarMobile.tsx
@@ -1,5 +1,5 @@
 import React, {useMemo} from 'react'
-import {Animated, StyleSheet, TouchableOpacity} from 'react-native'
+import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {TabBar} from 'view/com/pager/TabBar'
 import {RenderTabBarFnProps} from 'view/com/pager/Pager'
@@ -7,6 +7,8 @@ import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
+import {Link} from '../util/Link'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 
 export const FeedsTabBar = observer(
   (
@@ -33,21 +35,34 @@ export const FeedsTabBar = observer(
     }, [store])
 
     const items = useMemo(
-      () => ['Following', ...store.me.savedFeeds.pinnedFeedNames, 'My Feeds'],
+      () => ['Following', ...store.me.savedFeeds.pinnedFeedNames],
       [store.me.savedFeeds.pinnedFeedNames],
     )
 
     return (
       <Animated.View style={[pal.view, pal.border, styles.tabBar, transform]}>
-        <TouchableOpacity
-          testID="viewHeaderDrawerBtn"
-          style={styles.tabBarAvi}
-          onPress={onPressAvi}
-          accessibilityRole="button"
-          accessibilityLabel="Open navigation"
-          accessibilityHint="Access profile and other navigation links">
-          <UserAvatar avatar={store.me.avatar} size={30} />
-        </TouchableOpacity>
+        <View style={[pal.view, styles.topBar]}>
+          <View style={[pal.view]}>
+            <TouchableOpacity
+              testID="viewHeaderDrawerBtn"
+              style={styles.tabBarAvi}
+              onPress={onPressAvi}
+              accessibilityRole="button"
+              accessibilityLabel="Open navigation"
+              accessibilityHint="Access profile and other navigation links">
+              <UserAvatar avatar={store.me.avatar} size={30} />
+            </TouchableOpacity>
+          </View>
+          <View style={[pal.view]}>
+            <Link href="/settings/saved-feeds">
+              <FontAwesomeIcon
+                icon="satellite-dish"
+                size={24}
+                color={pal.colors.link}
+              />
+            </Link>
+          </View>
+        </View>
         <TabBar
           key={items.join(',')}
           {...props}
@@ -60,15 +75,21 @@ export const FeedsTabBar = observer(
 )
 
 const styles = StyleSheet.create({
+  topBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 18,
+    width: '100%',
+  },
   tabBar: {
     position: 'absolute',
     zIndex: 1,
     left: 0,
     right: 0,
     top: 0,
-    flexDirection: 'row',
+    flexDirection: 'column',
     alignItems: 'center',
-    paddingLeft: 18,
     borderBottomWidth: 1,
   },
   tabBarAvi: {
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index cebf58b48..caca9f926 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -80,6 +80,7 @@ export function TabBar({
         horizontal={true}
         showsHorizontalScrollIndicator={false}
         ref={scrollElRef}
+        contentContainerStyle={styles.contentContainer}
         onLayout={onLayout}>
         {items.map((item, i) => {
           const selected = i === selectedPage
@@ -111,6 +112,7 @@ const styles = isDesktopWeb
         width: 598,
         paddingHorizontal: 14,
       },
+      contentContainer: {},
       item: {
         paddingTop: 14,
         paddingBottom: 12,
@@ -123,12 +125,14 @@ const styles = isDesktopWeb
       outer: {
         flex: 1,
         flexDirection: 'row',
-        paddingLeft: 14,
+      },
+      contentContainer: {
+        gap: 14,
+        paddingHorizontal: 18,
       },
       item: {
         paddingTop: 8,
         paddingBottom: 12,
-        marginRight: 24,
         borderBottomWidth: 3,
         borderBottomColor: 'transparent',
       },
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index bd800590d..35f7b826b 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -16,7 +16,6 @@ import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn'
 import {FeedsTabBar} from '../com/pager/FeedsTabBar'
 import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {FAB} from '../com/util/fab/FAB'
-import {SavedFeeds} from 'view/com/feeds/SavedFeeds'
 import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
@@ -24,7 +23,7 @@ import {useAnalytics} from 'lib/analytics'
 import {ComposeIcon2} from 'lib/icons'
 import {isDesktopWeb} from 'platform/detection'
 
-const HEADER_OFFSET = isDesktopWeb ? 50 : 40
+const HEADER_OFFSET = isDesktopWeb ? 50 : 74
 const POLL_FREQ = 30e3 // 30sec
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
@@ -127,11 +126,6 @@ export const HomeScreen = withAuthRequired(
             />
           )
         })}
-        <SavedFeeds
-          key={String(2 + store.me.savedFeeds.pinned.length)}
-          headerOffset={HEADER_OFFSET}
-          isPageFocused={selectedPage === 2 + store.me.savedFeeds.pinned.length}
-        />
       </Pager>
     )
   }),
diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx
index e305e6305..b3a48b427 100644
--- a/src/view/screens/SavedFeeds.tsx
+++ b/src/view/screens/SavedFeeds.tsx
@@ -29,6 +29,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 import * as Toast from 'view/com/util/Toast'
 import {Haptics} from 'lib/haptics'
+import {Link, TextLink} from 'view/com/util/Link'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
 
@@ -65,11 +66,36 @@ export const SavedFeeds = withAuthRequired(
 
     const renderListFooterComponent = useCallback(() => {
       return (
-        <View style={styles.footer}>
+        <>
+          <View style={[styles.footerLinks, pal.border]}>
+            <Link style={[styles.footerLink, pal.border]} href="/search/feeds">
+              <FontAwesomeIcon
+                icon="search"
+                size={18}
+                color={pal.colors.icon}
+              />
+              <Text type="lg-medium" style={pal.textLight}>
+                Discover new feeds
+              </Text>
+            </Link>
+          </View>
+          <View style={styles.footerText}>
+            <Text type="sm" style={pal.textLight}>
+              Feeds are custom algorithms that users build with a little coding
+              expertise.{' '}
+              <TextLink
+                type="sm"
+                style={pal.link}
+                href="https://github.com/bluesky-social/feed-generator"
+                text="See this guide"
+              />{' '}
+              for more information.
+            </Text>
+          </View>
           {savedFeeds.isLoading && <ActivityIndicator />}
-        </View>
+        </>
       )
-    }, [savedFeeds])
+    }, [pal, savedFeeds.isLoading])
 
     const onRefresh = useCallback(() => savedFeeds.refresh(), [savedFeeds])
 
@@ -224,9 +250,6 @@ const styles = StyleSheet.create({
     borderRightWidth: 1,
     minHeight: '100vh',
   },
-  footer: {
-    paddingVertical: 20,
-  },
   empty: {
     paddingHorizontal: 20,
     paddingVertical: 20,
@@ -252,4 +275,19 @@ const styles = StyleSheet.create({
   noBorder: {
     borderTopWidth: 0,
   },
+  footerText: {
+    paddingHorizontal: 26,
+    paddingVertical: 22,
+  },
+  footerLinks: {
+    borderBottomWidth: 1,
+    borderTopWidth: 0,
+  },
+  footerLink: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    paddingHorizontal: 26,
+    paddingVertical: 18,
+    gap: 18,
+  },
 })