Added filter for follow notifications (#2)

src/screens/Settings/DeerSettings.tsx

···
   useSetDirectFetchRecords,
 } from '#/state/preferences/direct-fetch-records'
 import {
+  useHideFollowNotifications,
+  useSetHideFollowNotifications,
+} from '#/state/preferences/hide-follow-notifications'
+import {
   useNoAppLabelers,
   useSetNoAppLabelers,
 } from '#/state/preferences/no-app-labelers'
···
 import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
 import {Atom_Stroke2_Corner0_Rounded as DeerIcon} from '#/components/icons/Atom'
+import {Bell_Stroke2_Corner0_Rounded as BellIcon} from '#/components/icons/Bell'
 import {Eye_Stroke2_Corner0_Rounded as VisibilityIcon} from '#/components/icons/Eye'
 import {Earth_Stroke2_Corner2_Rounded as GlobeIcon} from '#/components/icons/Globe'
 import {Lab_Stroke2_Corner0_Rounded as BeakerIcon} from '#/components/icons/Lab'
···
 
   const noDiscoverFallback = useNoDiscoverFallback()
   const setNoDiscoverFallback = useSetNoDiscoverFallback()
+
+  const hideFollowNotifications = useHideFollowNotifications()
+  const setHideFollowNotifications = useSetHideFollowNotifications()
 
   const location = useGeolocation()
   const setLocationControl = Dialog.useDialogControl()
···
               style={[a.w_full]}>
               <Toggle.LabelText style={[a.flex_1]}>
                 <Trans>Do not fall back to discover feed</Trans>
+              </Toggle.LabelText>
+              <Toggle.Platform />
+            </Toggle.Item>
+          </SettingsList.Group>
+
+          <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
+            <SettingsList.ItemIcon icon={BellIcon} />
+            <SettingsList.ItemText>
+              <Trans>Notification Filters</Trans>
+            </SettingsList.ItemText>
+            <Toggle.Item
+              name="hide_follow_notifications"
+              label={_(msg`Hide follow notifications`)}
+              value={hideFollowNotifications ?? false}
+              onChange={value => setHideFollowNotifications(value)}
+              style={[a.w_full]}>
+              <Toggle.LabelText style={[a.flex_1]}>
+                <Trans>Hide follow notifications</Trans>
               </Toggle.LabelText>
               <Toggle.Platform />
             </Toggle.Item>

src/screens/Settings/NotificationSettings.tsx

···
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {AllNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {type AllNavigatorParams, type NativeStackScreenProps} from '#/lib/routes/types'
 import {useNotificationFeedQuery} from '#/state/queries/notifications/feed'
 import {useNotificationSettingsMutation} from '#/state/queries/notifications/settings'
 import {atoms as a} from '#/alf'

src/state/persisted/schema.ts

···
   noAppLabelers: z.boolean().optional(),
   noDiscoverFallback: z.boolean().optional(),
   repostCarouselEnabled: z.boolean().optional(),
+  hideFollowNotifications: z.boolean().optional(),
 
   /** @deprecated */
   mutedThreads: z.array(z.string()),
···
   noAppLabelers: false,
   noDiscoverFallback: false,
   repostCarouselEnabled: false,
+  hideFollowNotifications: false,
 }
 
 export function tryParse(rawData: string): Schema | undefined {

src/state/preferences/hide-follow-notifications.tsx

···
+import React from 'react'
+
+import * as persisted from '#/state/persisted'
+
+type StateContext = persisted.Schema['hideFollowNotifications']
+type SetContext = (v: persisted.Schema['hideFollowNotifications']) => void
+
+const stateContext = React.createContext<StateContext>(
+  persisted.defaults.hideFollowNotifications,
+)
+const setContext = React.createContext<SetContext>(
+  (_: persisted.Schema['hideFollowNotifications']) => {},
+)
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(
+    persisted.get('hideFollowNotifications'),
+  )
+
+  const setStateWrapped = React.useCallback(
+    (hideFollowNotifications: persisted.Schema['hideFollowNotifications']) => {
+      setState(hideFollowNotifications)
+      persisted.write('hideFollowNotifications', hideFollowNotifications)
+    },
+    [setState],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate(
+      'hideFollowNotifications',
+      nextHideFollowNotifications => {
+        setState(nextHideFollowNotifications)
+      },
+    )
+  }, [setStateWrapped])
+
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setStateWrapped}>
+        {children}
+      </setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useHideFollowNotifications() {
+  return React.useContext(stateContext)
+}
+
+export function useSetHideFollowNotifications() {
+  return React.useContext(setContext)
+}

src/state/preferences/index.tsx

···
 import {Provider as ExternalEmbedsProvider} from './external-embeds-prefs'
 import {Provider as GoLinksProvider} from './go-links-enabled'
 import {Provider as HiddenPostsProvider} from './hidden-posts'
+import {Provider as FollowNotificationsProvider} from './hide-follow-notifications'
 import {Provider as InAppBrowserProvider} from './in-app-browser'
 import {Provider as KawaiiProvider} from './kawaii'
 import {Provider as LanguagesProvider} from './languages'
···
       <AltTextRequiredProvider>
         <GoLinksProvider>
           <NoAppLabelersProvider>
-            <DirectFetchRecordsProvider>
-              <ConstellationProvider>
-                <NoDiscoverProvider>
-                  <LargeAltBadgeProvider>
-                    <ExternalEmbedsProvider>
-                      <HiddenPostsProvider>
-                        <InAppBrowserProvider>
-                          <DisableHapticsProvider>
-                            <AutoplayProvider>
-                              <UsedStarterPacksProvider>
-                                <SubtitlesProvider>
-                                  <TrendingSettingsProvider>
-                                    <RepostCarouselProvider>
+            <FollowNotificationsProvider>
+              <DirectFetchRecordsProvider>
+                <ConstellationProvider>
+                  <NoDiscoverProvider>
+                    <LargeAltBadgeProvider>
+                      <ExternalEmbedsProvider>
+                        <HiddenPostsProvider>
+                          <InAppBrowserProvider>
+                            <DisableHapticsProvider>
+                              <AutoplayProvider>
+                                <UsedStarterPacksProvider>
+                                  <SubtitlesProvider>
+                                    <TrendingSettingsProvider>
+                                      <RepostCarouselProvider>
                                         <KawaiiProvider>{children}</KawaiiProvider>
-                                    </RepostCarouselProvider>
-                                </TrendingSettingsProvider>
-                                </SubtitlesProvider>
-                              </UsedStarterPacksProvider>
-                            </AutoplayProvider>
-                          </DisableHapticsProvider>
-                        </InAppBrowserProvider>
-                      </HiddenPostsProvider>
-                    </ExternalEmbedsProvider>
-                  </LargeAltBadgeProvider>
-                </NoDiscoverProvider>
-              </ConstellationProvider>
-            </DirectFetchRecordsProvider>
+                                      </RepostCarouselProvider>
+                                    </TrendingSettingsProvider>
+                                  </SubtitlesProvider>
+                                </UsedStarterPacksProvider>
+                              </AutoplayProvider>
+                            </DisableHapticsProvider>
+                          </InAppBrowserProvider>
+                        </HiddenPostsProvider>
+                      </ExternalEmbedsProvider>
+                    </LargeAltBadgeProvider>
+                  </NoDiscoverProvider>
+                </ConstellationProvider>
+              </DirectFetchRecordsProvider>
+            </FollowNotificationsProvider>
           </NoAppLabelersProvider>
         </GoLinksProvider>
       </AltTextRequiredProvider>

src/state/queries/notifications/feed.ts

···
   useQueryClient,
 } from '@tanstack/react-query'
 
+import {useHideFollowNotifications} from '#/state/preferences/hide-follow-notifications'
 import {useAgent} from '#/state/session'
 import {useThreadgateHiddenReplyUris} from '#/state/threadgate-hidden-replies'
 import {useModerationOpts} from '../../preferences/moderation-opts'
···
   const agent = useAgent()
   const queryClient = useQueryClient()
   const moderationOpts = useModerationOpts()
+  const hideFollowNotifications = useHideFollowNotifications()
   const unreads = useUnreadNotificationsApi()
   const enabled = opts.enabled !== false
   const filter = opts.filter
···
           cursor: pageParam,
           queryClient,
           moderationOpts,
+          hideFollowNotifications,
           fetchAdditionalData: true,
           reasons,
         })

src/state/queries/notifications/unread.tsx

···
 import BroadcastChannel from '#/lib/broadcast'
 import {resetBadgeCount} from '#/lib/notifications/notifications'
 import {logger} from '#/logger'
+import {useHideFollowNotifications} from '#/state/preferences/hide-follow-notifications'
 import {useAgent, useSession} from '#/state/session'
 import {useModerationOpts} from '../../preferences/moderation-opts'
 import {truncateAndInvalidate} from '../util'
···
   const agent = useAgent()
   const queryClient = useQueryClient()
   const moderationOpts = useModerationOpts()
+  const hideFollowNotifications = useHideFollowNotifications()
 
   const [numUnread, setNumUnread] = React.useState('')
 
···
             limit: 40,
             queryClient,
             moderationOpts,
+            hideFollowNotifications,
             reasons: [],
 
             // only fetch subjects when the page is going to be used
···
         }
       },
     }
-  }, [setNumUnread, queryClient, moderationOpts, agent])
+  }, [
+    setNumUnread,
+    queryClient,
+    moderationOpts,
+    hideFollowNotifications,
+    agent,
+  ])
   checkUnreadRef.current = api.checkUnread
 
   return (

src/state/queries/notifications/util.ts

···
   limit,
   queryClient,
   moderationOpts,
+  hideFollowNotifications,
   fetchAdditionalData,
   reasons,
 }: {
···
   limit: number
   queryClient: QueryClient
   moderationOpts: ModerationOpts | undefined
+  hideFollowNotifications: boolean | undefined
   fetchAdditionalData: boolean
   reasons: string[]
 }): Promise<{
···
 
   // filter out notifs by mod rules
   const notifs = res.data.notifications.filter(
-    notif => !shouldFilterNotif(notif, moderationOpts),
+    notif => !shouldFilterNotif(notif, moderationOpts, hideFollowNotifications),
   )
 
   // group notifications which are essentially similar (follows, likes on a post)
···
 export function shouldFilterNotif(
   notif: AppBskyNotificationListNotifications.Notification,
   moderationOpts: ModerationOpts | undefined,
+  hideFollowNotifications: boolean | undefined,
 ): boolean {
   const containsImperative = !!notif.author.labels?.some(labelIsHideableOffense)
   if (containsImperative) {
+    return true
+  }
+  if (hideFollowNotifications && notif.reason == 'follow') {
     return true
   }
   if (!moderationOpts) {

src/view/screens/DebugMod.tsx

···
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useHideFollowNotifications} from '#/state/preferences/hide-follow-notifications'
 import {moderationOptsOverrideContext} from '#/state/preferences/moderation-opts'
 import {type FeedNotification} from '#/state/queries/notifications/types'
 import {
···
   moderationOpts: ModerationOpts
 }) {
   const t = useTheme()
-  if (shouldFilterNotif(notif.notification, moderationOpts)) {
+  const hideFollowNotifications = useHideFollowNotifications()
+  if (
+    shouldFilterNotif(
+      notif.notification,
+      moderationOpts,
+      hideFollowNotifications,
+    )
+  ) {
     return (
       <P style={[t.atoms.bg_contrast_25, a.px_lg, a.py_md]}>
         Filtered from the feed