diff options
| -rw-r--r-- | src/lib/statsig/gates.ts | 1 | ||||
| -rw-r--r-- | src/view/shell/bottom-bar/BottomBarWeb.tsx | 43 |
2 files changed, 36 insertions, 8 deletions
diff --git a/src/lib/statsig/gates.ts b/src/lib/statsig/gates.ts index 4481935f7..96be12c2d 100644 --- a/src/lib/statsig/gates.ts +++ b/src/lib/statsig/gates.ts @@ -3,3 +3,4 @@ export type Gate = | 'request_notifications_permission_after_onboarding_v2' | 'show_avi_follow_button' | 'show_follow_back_label_v2' + | 'show_notification_badge_mobile_web' diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx index 6860e8024..fcd4c8608 100644 --- a/src/view/shell/bottom-bar/BottomBarWeb.tsx +++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx @@ -16,6 +16,9 @@ import {s} from '#/lib/styles' import {useSession} from '#/state/session' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' +import {useGate} from 'lib/statsig/statsig' +import {useUnreadMessageCount} from 'state/queries/messages/list-converations' +import {useUnreadNotifications} from 'state/queries/notifications/unread' import {Button} from '#/view/com/util/forms/Button' import {Text} from '#/view/com/util/text/Text' import {Logo} from '#/view/icons/Logo' @@ -46,11 +49,15 @@ export function BottomBarWeb() { const {hasSession, currentAccount} = useSession() const pal = usePalette('default') const safeAreaInsets = useSafeAreaInsets() + const gate = useGate() const {footerMinimalShellTransform} = useMinimalShellMode() const {requestSwitchToAccount} = useLoggedOutViewControls() const closeAllActiveElements = useCloseAllActiveElements() const iconWidth = 26 + const unreadMessageCount = useUnreadMessageCount() + const notificationCountStr = useUnreadNotifications() + const showSignIn = React.useCallback(() => { closeAllActiveElements() requestSwitchToAccount({requestedAccount: 'none'}) @@ -103,10 +110,20 @@ export function BottomBarWeb() { {({isActive}) => { const Icon = isActive ? MessageFilled : Message return ( - <Icon - width={iconWidth - 1} - style={[styles.ctrlIcon, pal.text, styles.messagesIcon]} - /> + <> + <Icon + width={iconWidth - 1} + style={[styles.ctrlIcon, pal.text, styles.messagesIcon]} + /> + {unreadMessageCount.count > 0 && + gate('show_notification_badge_mobile_web') && ( + <View style={styles.notificationCount}> + <Text style={styles.notificationCountLabel}> + {unreadMessageCount.numUnread} + </Text> + </View> + )} + </> ) }} </NavItem> @@ -114,10 +131,20 @@ export function BottomBarWeb() { {({isActive}) => { const Icon = isActive ? BellFilled : Bell return ( - <Icon - width={iconWidth} - style={[styles.ctrlIcon, pal.text, styles.bellIcon]} - /> + <> + <Icon + width={iconWidth} + style={[styles.ctrlIcon, pal.text, styles.bellIcon]} + /> + {notificationCountStr !== '' && + gate('show_notification_badge_mobile_web') && ( + <View style={styles.notificationCount}> + <Text style={styles.notificationCountLabel}> + {notificationCountStr} + </Text> + </View> + )} + </> ) }} </NavItem> |