Gate chat icon in bottom bars (#3959)

2 files changed, 56 insertions, 4 deletions

diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index bcaaf3417..212587e30 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -37,6 +37,10 @@ import {
   Bell_Stroke2_Corner0_Rounded as Bell,
 } from '#/components/icons/Bell'
 import {
+  Hashtag_Filled_Corner0_Rounded as HashtagFilled,
+  Hashtag_Stroke2_Corner0_Rounded as Hashtag,
+} from '#/components/icons/Hashtag'
+import {
   HomeOpen_Filled_Corner0_Rounded as HomeFilled,
   HomeOpen_Stoke2_Corner0_Rounded as Home,
 } from '#/components/icons/HomeOpen'
@@ -63,8 +67,14 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   const safeAreaInsets = useSafeAreaInsets()
   const {track} = useAnalytics()
   const {footerHeight} = useShellLayout()
-  const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile, isAtMessages} =
-    useNavigationTabState()
+  const {
+    isAtHome,
+    isAtSearch,
+    isAtFeeds,
+    isAtNotifications,
+    isAtMyProfile,
+    isAtMessages,
+  } = useNavigationTabState()
   const numUnreadNotifications = useUnreadNotifications()
   const numUnreadMessages = useUnreadMessageCount()
   const {footerMinimalShellTransform} = useMinimalShellMode()
@@ -108,6 +118,10 @@ export function BottomBar({navigation}: BottomTabBarProps) {
     () => onPressTab('Search'),
     [onPressTab],
   )
+  const onPressFeeds = React.useCallback(
+    () => onPressTab('Feeds'),
+    [onPressTab],
+  )
   const onPressNotifications = React.useCallback(
     () => onPressTab('Notifications'),
     [onPressTab],
@@ -182,7 +196,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               accessibilityLabel={_(msg`Search`)}
               accessibilityHint=""
             />
-            {gate('dms') && (
+            {gate('dms') ? (
               <Btn
                 testID="bottomBarMessagesBtn"
                 icon={
@@ -209,6 +223,28 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                     : ''
                 }
               />
+            ) : (
+              <Btn
+                testID="bottomBarFeedsBtn"
+                icon={
+                  isAtFeeds ? (
+                    <HashtagFilled
+                      width={iconWidth + 1}
+                      style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
+                    />
+                  ) : (
+                    <Hashtag
+                      width={iconWidth + 1}
+                      style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
+                    />
+                  )
+                }
+                onPress={onPressFeeds}
+                accessible={true}
+                accessibilityRole="tab"
+                accessibilityLabel={_(msg`Feeds`)}
+                accessibilityHint=""
+              />
             )}
             <Btn
               testID="bottomBarNotificationsBtn"
diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx
index 3a0b92336..f2d2f26f9 100644
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx
@@ -27,6 +27,10 @@ import {
   Bell_Stroke2_Corner0_Rounded as Bell,
 } from '#/components/icons/Bell'
 import {
+  Hashtag_Filled_Corner0_Rounded as HashtagFilled,
+  Hashtag_Stroke2_Corner0_Rounded as Hashtag,
+} from '#/components/icons/Hashtag'
+import {
   HomeOpen_Filled_Corner0_Rounded as HomeFilled,
   HomeOpen_Stoke2_Corner0_Rounded as Home,
 } from '#/components/icons/HomeOpen'
@@ -101,7 +105,7 @@ export function BottomBarWeb() {
 
           {hasSession && (
             <>
-              {gate('dms') && (
+              {gate('dms') ? (
                 <NavItem routeName="Messages" href="/messages">
                   {({isActive}) => {
                     const Icon = isActive ? MessageFilled : Message
@@ -113,6 +117,18 @@ export function BottomBarWeb() {
                     )
                   }}
                 </NavItem>
+              ) : (
+                <NavItem routeName="Feeds" href="/feeds">
+                  {({isActive}) => {
+                    const Icon = isActive ? HashtagFilled : Hashtag
+                    return (
+                      <Icon
+                        width={iconWidth + 1}
+                        style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
+                      />
+                    )
+                  }}
+                </NavItem>
               )}
               <NavItem routeName="Notifications" href="/notifications">
                 {({isActive}) => {