Priority notifications (#4798)

* new settings screen

* bring back the spinner

* add experimental language

* fix typo, change leading

* integrate priority notifications API

* update package

* use refetch instead of invalidateQueries

* fix read-after-write issue by polling for update

* add spinner for initial load

* rm onmutate, it's overcomplicated

* set error state eagerly

* Change language in description

Co-authored-by: Hailey <me@haileyok.com>

* prettier

* add `Toggle.Platform`

* extract out mutation hook + error state

* rm useless cache mutation

* disambiguate isError and isPending

* rm unused isError

---------

Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>
Co-authored-by: Hailey <me@haileyok.com>

src/view/com/notifications/Feed.tsx

@@ -35,11 +35,13 @@ export function Feed({
   onPressTryAgain,
   onScrolledDownChange,
   ListHeaderComponent,
+  overridePriorityNotifications,
 }: {
   scrollElRef?: ListRef
   onPressTryAgain?: () => void
   onScrolledDownChange: (isScrolledDown: boolean) => void
   ListHeaderComponent?: () => JSX.Element
+  overridePriorityNotifications?: boolean
 }) {
   const initialNumToRender = useInitialNumToRender()
 
@@ -59,7 +61,10 @@ export function Feed({
     hasNextPage,
     isFetchingNextPage,
     fetchNextPage,
-  } = useNotificationFeedQuery({enabled: !!moderationOpts})
+  } = useNotificationFeedQuery({
+    enabled: !!moderationOpts,
+    overridePriorityNotifications,
+  })
   const isEmpty = !isFetching && !data?.pages[0]?.items.length
 
   const items = React.useMemo(() => {

src/view/screens/Notifications.tsx

@@ -1,11 +1,19 @@
-import React from 'react'
+import React, {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {useAnalytics} from '#/lib/analytics/analytics'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {ComposeIcon2} from '#/lib/icons'
+import {
+  NativeStackScreenProps,
+  NotificationsTabNavigatorParams,
+} from '#/lib/routes/types'
+import {s} from '#/lib/styles'
 import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
 import {emitSoftReset, listenSoftReset} from '#/state/events'
@@ -17,37 +25,32 @@ import {
 import {truncateAndInvalidate} from '#/state/queries/util'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {useComposerControls} from '#/state/shell/composer'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {ComposeIcon2} from 'lib/icons'
-import {
-  NativeStackScreenProps,
-  NotificationsTabNavigatorParams,
-} from 'lib/routes/types'
-import {colors, s} from 'lib/styles'
-import {TextLink} from 'view/com/util/Link'
+import {Feed} from '#/view/com/notifications/Feed'
+import {FAB} from '#/view/com/util/fab/FAB'
+import {MainScrollProvider} from '#/view/com/util/MainScrollProvider'
+import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {ListMethods} from 'view/com/util/List'
 import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
 import {CenteredView} from 'view/com/util/Views'
+import {atoms as a, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
+import {SettingsGear2_Stroke2_Corner0_Rounded as SettingsIcon} from '#/components/icons/SettingsGear2'
+import {Link} from '#/components/Link'
 import {Loader} from '#/components/Loader'
-import {Feed} from '../com/notifications/Feed'
-import {FAB} from '../com/util/fab/FAB'
-import {MainScrollProvider} from '../com/util/MainScrollProvider'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {Text} from '#/components/Typography'
 
 type Props = NativeStackScreenProps<
   NotificationsTabNavigatorParams,
   'Notifications'
 >
-export function NotificationsScreen({}: Props) {
+export function NotificationsScreen({route: {params}}: Props) {
   const {_} = useLingui()
   const setMinimalShellMode = useSetMinimalShellMode()
   const [isScrolledDown, setIsScrolledDown] = React.useState(false)
   const [isLoadingLatest, setIsLoadingLatest] = React.useState(false)
   const scrollElRef = React.useRef<ListMethods>(null)
   const {screen} = useAnalytics()
-  const pal = usePalette('default')
+  const t = useTheme()
   const {isDesktop} = useWebMediaQueries()
   const queryClient = useQueryClient()
   const unreadNotifs = useUnreadNotifications()
@@ -109,56 +112,87 @@ export function NotificationsScreen({}: Props) {
     return listenSoftReset(onPressLoadLatest)
   }, [onPressLoadLatest, isScreenFocused])
 
+  const renderButton = useCallback(() => {
+    return (
+      <Link
+        to="/notifications/settings"
+        label={_(msg`Notification settings`)}
+        size="small"
+        variant="ghost"
+        color="secondary"
+        shape="square"
+        style={[a.justify_center]}>
+        <SettingsIcon size="md" style={t.atoms.text_contrast_medium} />
+      </Link>
+    )
+  }, [_, t])
+
   const ListHeaderComponent = React.useCallback(() => {
     if (isDesktop) {
       return (
         <View
           style={[
-            pal.view,
-            {
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              paddingHorizontal: 18,
-              paddingVertical: 12,
-            },
+            t.atoms.bg,
+            a.flex_row,
+            a.align_center,
+            a.justify_between,
+            a.gap_lg,
+            a.px_lg,
+            a.pr_md,
+            a.py_sm,
           ]}>
-          <TextLink
-            type="title-lg"
-            href="/notifications"
-            style={[pal.text, {fontWeight: 'bold'}]}
-            text={
-              <>
-                <Trans>Notifications</Trans>{' '}
+          <Button
+            label={_(msg`Notifications`)}
+            accessibilityHint={_(msg`Refresh notifications`)}
+            onPress={emitSoftReset}>
+            {({hovered, pressed}) => (
+              <Text
+                style={[
+                  a.text_2xl,
+                  a.font_bold,
+                  (hovered || pressed) && a.underline,
+                ]}>
+                <Trans>Notifications</Trans>
                 {hasNew && (
                   <View
                     style={{
+                      left: 4,
                       top: -8,
-                      backgroundColor: colors.blue3,
+                      backgroundColor: t.palette.primary_500,
                       width: 8,
                       height: 8,
                       borderRadius: 4,
                     }}
                   />
                 )}
-              </>
-            }
-            onPress={emitSoftReset}
-          />
-          {isLoadingLatest ? <Loader size="md" /> : <></>}
+              </Text>
+            )}
+          </Button>
+          <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+            {isLoadingLatest ? <Loader size="md" /> : <></>}
+            {renderButton()}
+          </View>
         </View>
       )
     }
     return <></>
-  }, [isDesktop, pal, hasNew, isLoadingLatest])
+  }, [isDesktop, t, hasNew, renderButton, _, isLoadingLatest])
 
   const renderHeaderSpinner = React.useCallback(() => {
     return (
-      <View style={{width: 30, height: 20, alignItems: 'flex-end'}}>
+      <View
+        style={[
+          {width: 30, height: 20},
+          a.flex_row,
+          a.align_center,
+          a.justify_end,
+          a.gap_md,
+        ]}>
         {isLoadingLatest ? <Loader width={20} /> : <></>}
+        {renderButton()}
       </View>
     )
-  }, [isLoadingLatest])
+  }, [renderButton, isLoadingLatest])
 
   return (
     <CenteredView
@@ -176,6 +210,7 @@ export function NotificationsScreen({}: Props) {
           onScrolledDownChange={setIsScrolledDown}
           scrollElRef={scrollElRef}
           ListHeaderComponent={ListHeaderComponent}
+          overridePriorityNotifications={params?.show === 'all'}
         />
       </MainScrollProvider>
       {(isScrolledDown || hasNew) && (

src/view/screens/NotificationsSettings.tsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import {View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {AllNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {useNotificationFeedQuery} from '#/state/queries/notifications/feed'
+import {useNotificationsSettingsMutation} from '#/state/queries/notifications/settings'
+import {ViewHeader} from '#/view/com/util/ViewHeader'
+import {CenteredView} from '#/view/com/util/Views'
+import {atoms as a, useTheme} from '#/alf'
+import {Error} from '#/components/Error'
+import * as Toggle from '#/components/forms/Toggle'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+type Props = NativeStackScreenProps<AllNavigatorParams, 'NotificationsSettings'>
+export function NotificationsSettingsScreen({}: Props) {
+  const {_} = useLingui()
+  const t = useTheme()
+
+  const {data, isError: isQueryError, refetch} = useNotificationFeedQuery()
+  const serverPriority = data?.pages.at(0)?.priority
+
+  const {
+    mutate: onChangePriority,
+    isPending: isMutationPending,
+    variables,
+  } = useNotificationsSettingsMutation()
+
+  const priority = isMutationPending
+    ? variables[0] === 'enabled'
+    : serverPriority
+
+  return (
+    <CenteredView style={a.flex_1} sideBorders>
+      <ViewHeader
+        title={_(msg`Notification Settings`)}
+        showOnDesktop
+        showBorder
+      />
+      {isQueryError ? (
+        <Error
+          title={_(msg`Oops!`)}
+          message={_(msg`Something went wrong!`)}
+          onRetry={refetch}
+          sideBorders={false}
+        />
+      ) : (
+        <View style={[a.p_lg, a.gap_md]}>
+          <Text style={[a.text_lg, a.font_bold]}>
+            <FontAwesomeIcon icon="flask" style={t.atoms.text} />{' '}
+            <Trans>Notification filters</Trans>
+          </Text>
+          <Toggle.Group
+            label={_(msg`Priority notifications`)}
+            type="checkbox"
+            values={priority ? ['enabled'] : []}
+            onChange={onChangePriority}
+            disabled={typeof priority !== 'boolean' || isMutationPending}>
+            <View>
+              <Toggle.Item
+                name="enabled"
+                label={_(msg`Enable priority notifications`)}
+                style={[a.justify_between, a.py_sm]}>
+                <Toggle.LabelText>
+                  <Trans>Enable priority notifications</Trans>
+                </Toggle.LabelText>
+                {!data ? <Loader size="md" /> : <Toggle.Platform />}
+              </Toggle.Item>
+            </View>
+          </Toggle.Group>
+          <View
+            style={[
+              a.mt_sm,
+              a.px_xl,
+              a.py_lg,
+              a.rounded_md,
+              t.atoms.bg_contrast_25,
+            ]}>
+            <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
+              <Trans>
+                Experimental: When this preference is enabled, you'll only
+                receive reply and quote notifications from users you follow.
+                We'll continue to add more controls here over time.
+              </Trans>
+            </Text>
+          </View>
+        </View>
+      )}
+    </CenteredView>
+  )
+}