diff --git a/src/state/models/feeds/notifications.ts b/src/state/models/feeds/notifications.ts
index 73424f03..3777abb9 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 7a3e55d7..fefc540c 100644
--- a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
@@ -3,7 +3,6 @@ import {StyleSheet, TouchableOpacity} 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'
@@ -12,30 +11,60 @@ const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
export const LoadLatestBtn = ({
onPress,
label,
+ showIndicator,
+ minimalShellMode,
}: {
onPress: () => void
label: string
+ showIndicator: boolean
+ minimalShellMode?: boolean
}) => {
const pal = usePalette('default')
if (isMobileWeb) {
- return
+ return (
+
+ )
}
return (
-
-
-
-
-
+ <>
+ {showIndicator && (
+
+
+ {label}
+
+
+ )}
+
+
+
+
+
+ >
)
}
@@ -58,4 +87,21 @@ const styles = StyleSheet.create({
position: 'relative',
top: 2,
},
+ loadLatestCentered: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ position: 'absolute',
+ left: '50vw',
+ // @ts-ignore web only -prf
+ transform: 'translateX(-50%)',
+ top: 60,
+ paddingHorizontal: 24,
+ paddingVertical: 14,
+ borderRadius: 30,
+ borderWidth: 1,
+ },
+ loadLatestCenteredMinimal: {
+ top: 20,
+ },
})
diff --git a/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx
index 5e03e228..412b9b80 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 {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
+ minimalShellMode?: boolean // NOTE not used on mobile -prf
+ }) => {
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 35f7b826..2aade5e1 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -240,6 +240,7 @@ const FeedPage = observer(
feed.refresh()
}, [feed, scrollToTop])
+ const hasNew = feed.hasNewLatest && !feed.isRefreshing
return (
- {isScrolledDown && (
-
+ {(isScrolledDown || hasNew) && (
+
)}
@@ -98,10 +101,12 @@ export const NotificationsScreen = withAuthRequired(
onScroll={onMainScroll}
scrollElRef={scrollElRef}
/>
- {isScrolledDown && (
+ {(isScrolledDown || hasNew) && (
)}