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) && ( )}