forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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>
authored by
Hailey
Dan Abramov
and committed by
GitHub
42477d8b
aefbab38
+36
-8
+1
src/lib/statsig/gates.ts
+1
src/lib/statsig/gates.ts
+35
-8
src/view/shell/bottom-bar/BottomBarWeb.tsx
+35
-8
src/view/shell/bottom-bar/BottomBarWeb.tsx
···
16
16
import {useSession} from '#/state/session'
17
17
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
18
18
import {useCloseAllActiveElements} from '#/state/util'
19
+
import {useGate} from 'lib/statsig/statsig'
20
+
import {useUnreadMessageCount} from 'state/queries/messages/list-converations'
21
+
import {useUnreadNotifications} from 'state/queries/notifications/unread'
19
22
import {Button} from '#/view/com/util/forms/Button'
20
23
import {Text} from '#/view/com/util/text/Text'
21
24
import {Logo} from '#/view/icons/Logo'
···
46
49
const {hasSession, currentAccount} = useSession()
47
50
const pal = usePalette('default')
48
51
const safeAreaInsets = useSafeAreaInsets()
52
+
const gate = useGate()
49
53
const {footerMinimalShellTransform} = useMinimalShellMode()
50
54
const {requestSwitchToAccount} = useLoggedOutViewControls()
51
55
const closeAllActiveElements = useCloseAllActiveElements()
52
56
const iconWidth = 26
57
+
58
+
const unreadMessageCount = useUnreadMessageCount()
59
+
const notificationCountStr = useUnreadNotifications()
53
60
54
61
const showSignIn = React.useCallback(() => {
55
62
closeAllActiveElements()
···
103
110
{({isActive}) => {
104
111
const Icon = isActive ? MessageFilled : Message
105
112
return (
106
-
<Icon
107
-
width={iconWidth - 1}
108
-
style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
109
-
/>
113
+
<>
114
+
<Icon
115
+
width={iconWidth - 1}
116
+
style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
117
+
/>
118
+
{unreadMessageCount.count > 0 &&
119
+
gate('show_notification_badge_mobile_web') && (
120
+
<View style={styles.notificationCount}>
121
+
<Text style={styles.notificationCountLabel}>
122
+
{unreadMessageCount.numUnread}
123
+
</Text>
124
+
</View>
125
+
)}
126
+
</>
110
127
)
111
128
}}
112
129
</NavItem>
···
114
131
{({isActive}) => {
115
132
const Icon = isActive ? BellFilled : Bell
116
133
return (
117
-
<Icon
118
-
width={iconWidth}
119
-
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
120
-
/>
134
+
<>
135
+
<Icon
136
+
width={iconWidth}
137
+
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
138
+
/>
139
+
{notificationCountStr !== '' &&
140
+
gate('show_notification_badge_mobile_web') && (
141
+
<View style={styles.notificationCount}>
142
+
<Text style={styles.notificationCountLabel}>
143
+
{notificationCountStr}
144
+
</Text>
145
+
</View>
146
+
)}
147
+
</>
121
148
)
122
149
}}
123
150
</NavItem>