1 files changed, 56 insertions, 18 deletions
diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx
index 725c44603..9c7138815 100644
--- a/src/view/com/pager/FeedsTabBarMobile.tsx
+++ b/src/view/com/pager/FeedsTabBarMobile.tsx
@@ -1,12 +1,17 @@
-import React from 'react'
-import {Animated, StyleSheet, TouchableOpacity} from 'react-native'
+import React, {useMemo} from 'react'
+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'
-import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
+import {Link} from '../util/Link'
+import {Text} from '../util/text/Text'
+import {CogIcon} from 'lib/icons'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {s} from 'lib/styles'
 
 export const FeedsTabBar = observer(
   (
@@ -28,25 +33,51 @@ export const FeedsTabBar = observer(
       transform: [{translateY: Animated.multiply(interp, -100)}],
     }
 
+    const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
+
     const onPressAvi = React.useCallback(() => {
       store.shell.openDrawer()
     }, [store])
 
+    const items = useMemo(
+      () => ['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"
+              onPress={onPressAvi}
+              accessibilityRole="button"
+              accessibilityLabel="Open navigation"
+              accessibilityHint="Access profile and other navigation links"
+              hitSlop={10}>
+              <FontAwesomeIcon
+                icon="bars"
+                size={18}
+                color={pal.colors.textLight}
+              />
+            </TouchableOpacity>
+          </View>
+          <Text style={[brandBlue, s.bold, styles.title]}>Bluesky</Text>
+          <View style={[pal.view]}>
+            <Link
+              href="/settings/saved-feeds"
+              hitSlop={10}
+              accessibilityRole="button"
+              accessibilityLabel="Edit Saved Feeds"
+              accessibilityHint="Opens screen to edit Saved Feeds">
+              <CogIcon size={21} strokeWidth={2} style={pal.textLight} />
+            </Link>
+          </View>
+        </View>
         <TabBar
+          key={items.join(',')}
           {...props}
-          items={['Following', "What's hot"]}
-          indicatorPosition="bottom"
+          items={items}
           indicatorColor={pal.colors.link}
         />
       </Animated.View>
@@ -61,13 +92,20 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     top: 0,
+    flexDirection: 'column',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+  },
+  topBar: {
     flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: 18,
-    borderBottomWidth: 1,
+    paddingTop: 8,
+    paddingBottom: 2,
+    width: '100%',
   },
-  tabBarAvi: {
-    marginTop: 1,
-    marginRight: 18,
+  title: {
+    fontSize: 21,
   },
 })