add notification count badge mobile web (#4375)

* add notification count badge mobile web

* rename var

* add gate to types

* implement gate

* nit

* Fix condition order, narrow types

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

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>