saved feeds in tab bar

src/state/models/feeds/algo/saved.ts

@@ -41,6 +41,16 @@ export class SavedFeedsModel {
     return this.hasLoaded && !this.hasContent
   }
 
+  get numOfFeeds() {
+    return this.feeds.length
+  }
+
+  get listOfFeedNames() {
+    return this.feeds.map(
+      f => f.data.displayName ?? f.data.creator.displayName + "'s feed",
+    )
+  }
+
   // public api
   // =
 

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -45,7 +45,11 @@ export const FeedsTabBar = observer(
         </TouchableOpacity>
         <TabBar
           {...props}
-          items={['Following', "What's hot"]}
+          items={[
+            'Following',
+            "What's hot",
+            ...store.me.savedFeeds.listOfFeedNames,
+          ]}
           indicatorPosition="bottom"
           indicatorColor={pal.colors.link}
         />

src/view/com/pager/TabBar.tsx

@@ -4,6 +4,7 @@ import {Text} from '../util/text/Text'
 import {PressableWithHover} from '../util/PressableWithHover'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isDesktopWeb} from 'platform/detection'
+import {ScrollView} from 'react-native-gesture-handler'
 
 interface Layout {
   x: number
@@ -102,6 +103,7 @@ export function TabBar({
       onLayout={onLayout}
       ref={containerRef}>
       <Animated.View style={[styles.indicator, indicatorStyle]} />
+      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
         {items.map((item, i) => {
           const selected = i === selectedPage
           return (
@@ -122,6 +124,7 @@ export function TabBar({
             </PressableWithHover>
           )
         })}
+      </ScrollView>
     </View>
   )
 }

src/view/screens/Home.tsx

@@ -112,6 +112,17 @@ export const HomeScreen = withAuthRequired(
           feed={algoFeed}
           renderEmptyState={renderWhatsHotEmptyState}
         />
+        {store.me.savedFeeds.feeds.map((f, index) => {
+          return (
+            <FeedPage
+              key={String(2 + index + 1)}
+              testID="customFeed"
+              isPageFocused={selectedPage === 2 + index}
+              feed={new PostsFeedModel(store, 'custom', {feed: f.getUri})}
+              renderEmptyState={renderFollowingEmptyState}
+            />
+          )
+        })}
       </Pager>
     )
   }),

src/view/screens/Settings.tsx

@@ -295,7 +295,7 @@ export const SettingsScreen = withAuthRequired(
             style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
             accessibilityHint="Custom Algorithms"
             accessibilityLabel="Opens screen with all bookmarked custom algorithms"
-            href="/settings/custom-algorithms">
+            href="/settings/saved-feeds">
             <View style={[styles.iconContainer, pal.btn]}>
               <FontAwesomeIcon
                 icon="rss"