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,26 +103,28 @@ export function TabBar({
       onLayout={onLayout}
       ref={containerRef}>
       <Animated.View style={[styles.indicator, indicatorStyle]} />
-      {items.map((item, i) => {
+      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
-        const selected = i === selectedPage
+        {items.map((item, i) => {
-        return (
+          const selected = i === selectedPage
-          <PressableWithHover
+          return (
-            ref={itemRefs[i]}
+            <PressableWithHover
-            key={item}
+              ref={itemRefs[i]}
-            style={
+              key={item}
-              indicatorPosition === 'top' ? styles.itemTop : styles.itemBottom
+              style={
-            }
+                indicatorPosition === 'top' ? styles.itemTop : styles.itemBottom
-            hoverStyle={pal.viewLight}
+              }
-            onPress={() => onPressItem(i)}>
+              hoverStyle={pal.viewLight}
-            <Text
+              onPress={() => onPressItem(i)}>
-              type="xl-bold"
+              <Text
-              testID={testID ? `${testID}-${item}` : undefined}
+                type="xl-bold"
-              style={selected ? pal.text : pal.textLight}>
+                testID={testID ? `${testID}-${item}` : undefined}
-              {item}
+                style={selected ? pal.text : pal.textLight}>
-            </Text>
+                {item}
-          </PressableWithHover>
+              </Text>
-        )
+            </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"