about summary refs log tree commit diff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/view/com/pager/FeedsTabBarMobile.tsx49
-rw-r--r--src/view/com/pager/TabBar.tsx8
-rw-r--r--src/view/screens/Home.tsx8
-rw-r--r--src/view/screens/SavedFeeds.tsx50
-rw-r--r--src/view/shell/bottom-bar/BottomBar.tsx25
-rw-r--r--src/view/shell/bottom-bar/BottomBarStyles.tsx5
6 files changed, 104 insertions, 41 deletions
diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx
index 5954e7f2e..b99efcfed 100644
--- a/src/view/com/pager/FeedsTabBarMobile.tsx
+++ b/src/view/com/pager/FeedsTabBarMobile.tsx
@@ -1,12 +1,14 @@
 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'
-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'
+import {colors} from 'lib/styles'
 
 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">
+              <FontAwesomeIcon icon="bars" size={24} color={colors.blue3} />
+            </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 ab765e9cd..2aade5e1a 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,
+  },
 })
diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index ef9499f9f..394aef7af 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -20,14 +20,13 @@ import {
   MagnifyingGlassIcon2Solid,
   BellIcon,
   BellIconSolid,
-  UserIcon,
-  UserIconSolid,
 } from 'lib/icons'
 import {usePalette} from 'lib/hooks/usePalette'
 import {getTabState, TabState} from 'lib/routes/helpers'
 import {styles} from './BottomBarStyles'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
+import {UserAvatar} from 'view/com/util/UserAvatar'
 
 export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
   const store = useStores()
@@ -154,17 +153,19 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
         icon={
           <View style={styles.ctrlIconSizingWrapper}>
             {isAtMyProfile ? (
-              <UserIconSolid
-                size={28}
-                strokeWidth={1.5}
-                style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
-              />
+              <View
+                style={[
+                  styles.ctrlIcon,
+                  pal.text,
+                  styles.profileIcon,
+                  styles.onProfile,
+                ]}>
+                <UserAvatar avatar={store.me.avatar} size={27} />
+              </View>
             ) : (
-              <UserIcon
-                size={28}
-                strokeWidth={1.5}
-                style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
-              />
+              <View style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
+                <UserAvatar avatar={store.me.avatar} size={28} />
+              </View>
             )}
           </View>
         }
diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx
index 3d5adbc9e..2414b9911 100644
--- a/src/view/shell/bottom-bar/BottomBarStyles.tsx
+++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx
@@ -58,4 +58,9 @@ export const styles = StyleSheet.create({
   profileIcon: {
     top: -4,
   },
+  onProfile: {
+    borderColor: colors.black,
+    borderWidth: 1,
+    borderRadius: 100,
+  },
 })
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-11 20:23:43 +0000