zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

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>
zio/stable
Hailey 2024-06-05 10:13:42 -07:00 committed by GitHub
parent aefbab3850
commit 42477d8bbb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/statsig/gates.ts
View File

@ -3,3 +3,4 @@ export type Gate =
| 'request_notifications_permission_after_onboarding_v2' | 'request_notifications_permission_after_onboarding_v2'
| 'show_avi_follow_button' | 'show_avi_follow_button'
| 'show_follow_back_label_v2' | 'show_follow_back_label_v2'
| 'show_notification_badge_mobile_web'

43
src/view/shell/bottom-bar/BottomBarWeb.tsx
View File

@ -16,6 +16,9 @@ import {s} from '#/lib/styles'
import {useSession} from '#/state/session' import {useSession} from '#/state/session'
import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useLoggedOutViewControls} from '#/state/shell/logged-out'
import {useCloseAllActiveElements} from '#/state/util' 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 {Button} from '#/view/com/util/forms/Button'
import {Text} from '#/view/com/util/text/Text' import {Text} from '#/view/com/util/text/Text'
import {Logo} from '#/view/icons/Logo' import {Logo} from '#/view/icons/Logo'
@ -46,11 +49,15 @@ export function BottomBarWeb() {
const {hasSession, currentAccount} = useSession() const {hasSession, currentAccount} = useSession()
const pal = usePalette('default') const pal = usePalette('default')
const safeAreaInsets = useSafeAreaInsets() const safeAreaInsets = useSafeAreaInsets()
const gate = useGate()
const {footerMinimalShellTransform} = useMinimalShellMode() const {footerMinimalShellTransform} = useMinimalShellMode()
const {requestSwitchToAccount} = useLoggedOutViewControls() const {requestSwitchToAccount} = useLoggedOutViewControls()
const closeAllActiveElements = useCloseAllActiveElements() const closeAllActiveElements = useCloseAllActiveElements()
const iconWidth = 26 const iconWidth = 26
const unreadMessageCount = useUnreadMessageCount()
const notificationCountStr = useUnreadNotifications()
const showSignIn = React.useCallback(() => { const showSignIn = React.useCallback(() => {
closeAllActiveElements() closeAllActiveElements()
requestSwitchToAccount({requestedAccount: 'none'}) requestSwitchToAccount({requestedAccount: 'none'})
@ -103,10 +110,20 @@ export function BottomBarWeb() {
{({isActive}) => { {({isActive}) => {
const Icon = isActive ? MessageFilled : Message const Icon = isActive ? MessageFilled : Message
return ( return (
<Icon <>
width={iconWidth - 1} <Icon
style={[styles.ctrlIcon, pal.text, styles.messagesIcon]} 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> </NavItem>
@ -114,10 +131,20 @@ export function BottomBarWeb() {
{({isActive}) => { {({isActive}) => {
const Icon = isActive ? BellFilled : Bell const Icon = isActive ? BellFilled : Bell
return ( return (
<Icon <>
width={iconWidth} <Icon
style={[styles.ctrlIcon, pal.text, styles.bellIcon]} 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> </NavItem>