add top bar and link to new SavedScreen

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: {

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',
       },