diff --git a/src/state/models/feeds/notifications.ts b/src/state/models/feeds/notifications.ts
index 73424f03ed..3777abb926 100644
--- a/src/state/models/feeds/notifications.ts
+++ b/src/state/models/feeds/notifications.ts
@@ -290,7 +290,9 @@ export class NotificationsFeedModel {
}
get hasNewLatest() {
- return this.queuedNotifications && this.queuedNotifications?.length > 0
+ return Boolean(
+ this.queuedNotifications && this.queuedNotifications?.length > 0,
+ )
}
get unreadCountLabel(): string {
diff --git a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
index 7a3e55d7d1..0b4e649f9f 100644
--- a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
@@ -1,24 +1,32 @@
import React from 'react'
-import {StyleSheet, TouchableOpacity} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Text} from '../text/Text'
import {usePalette} from 'lib/hooks/usePalette'
-import {UpIcon} from 'lib/icons'
import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
import {isMobileWeb} from 'platform/detection'
+import {colors} from 'lib/styles'
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
export const LoadLatestBtn = ({
onPress,
label,
+ showIndicator,
}: {
onPress: () => void
label: string
+ showIndicator: boolean
}) => {
const pal = usePalette('default')
if (isMobileWeb) {
- return
+ return (
+
+ )
}
return (
+ {showIndicator && }
)
}
@@ -58,4 +67,13 @@ const styles = StyleSheet.create({
position: 'relative',
top: 2,
},
+ indicator: {
+ position: 'absolute',
+ top: 3,
+ right: 3,
+ backgroundColor: colors.blue3,
+ width: 10,
+ height: 10,
+ borderRadius: 6,
+ },
})
diff --git a/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx
index 5e03e2285b..7d1823a139 100644
--- a/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx
@@ -1,16 +1,26 @@
import React from 'react'
-import {StyleSheet, TouchableOpacity} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {clamp} from 'lodash'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
+import {colors} from 'lib/styles'
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
export const LoadLatestBtn = observer(
- ({onPress, label}: {onPress: () => void; label: string}) => {
+ ({
+ onPress,
+ label,
+ showIndicator,
+ }: {
+ onPress: () => void
+ label: string
+ showIndicator: boolean
+ }) => {
const store = useStores()
const pal = usePalette('default')
const safeAreaInsets = useSafeAreaInsets()
@@ -30,6 +40,7 @@ export const LoadLatestBtn = observer(
accessibilityLabel={label}
accessibilityHint="">
+ {showIndicator && }
)
},
@@ -48,4 +59,14 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
+ indicator: {
+ position: 'absolute',
+ top: 3,
+ right: 3,
+ backgroundColor: colors.blue3,
+ width: 12,
+ height: 12,
+ borderRadius: 6,
+ borderWidth: 1,
+ },
})
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index bd800590d9..2c03f1930e 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -246,6 +246,7 @@ const FeedPage = observer(
feed.refresh()
}, [feed, scrollToTop])
+ const hasNew = feed.hasNewLatest && !feed.isRefreshing
return (
- {isScrolledDown && (
-
+ {(isScrolledDown || hasNew) && (
+
)}
@@ -98,10 +101,11 @@ export const NotificationsScreen = withAuthRequired(
onScroll={onMainScroll}
scrollElRef={scrollElRef}
/>
- {isScrolledDown && (
+ {(isScrolledDown || hasNew) && (
)}