feat: support hiding indirect notifications

src/pages/primary/NoteListPage/index.tsx

@@ -127,7 +127,7 @@ function NoteListPageTitlebar({
                 layoutRef?.current?.scrollToTop('smooth')
               }
             }}
-            className={showRelayDetails ? 'bg-accent/50' : ''}
+            className={showRelayDetails ? 'bg-muted/40' : ''}
           >
             <Info />
           </Button>

src/pages/primary/NotificationListPage/index.tsx

@@ -1,15 +1,21 @@
 import NotificationList from '@/components/NotificationList'
-import TrustScoreFilter from '@/components/TrustScoreFilter'
-import { SPECIAL_TRUST_SCORE_FILTER_ID } from '@/constants'
+import { Button } from '@/components/ui/button'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
+import { cn } from '@/lib/utils'
 import { usePrimaryPage } from '@/PageManager'
+import {
+  NotificationUserPreferenceContext,
+  useNotificationUserPreference
+} from '@/providers/NotificationUserPreferenceProvider'
+import localStorage from '@/services/local-storage.service'
 import { TPageRef } from '@/types'
 import { Bell } from 'lucide-react'
-import { forwardRef, useEffect, useRef } from 'react'
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const NotificationListPage = forwardRef<TPageRef>((_, ref) => {
   const { current } = usePrimaryPage()
+  const [hideIndirect, setHideIndirect] = useState(localStorage.getHideIndirectNotifications())
   const firstRenderRef = useRef(true)
   const notificationListRef = useRef<{ refresh: () => void }>(null)
 
@@ -20,15 +26,30 @@ const NotificationListPage = forwardRef<TPageRef>((_, ref) => {
     firstRenderRef.current = false
   }, [current])
 
+  const updateHideIndirect = useCallback(
+    (enable: boolean) => {
+      setHideIndirect(enable)
+      localStorage.setHideIndirectNotifications(enable)
+    },
+    [setHideIndirect]
+  )
+
   return (
-    <PrimaryPageLayout
-      ref={ref}
-      pageName="notifications"
-      titlebar={<NotificationListPageTitlebar />}
-      displayScrollToTopButton
+    <NotificationUserPreferenceContext.Provider
+      value={{
+        hideIndirect,
+        updateHideIndirect
+      }}
     >
-      <NotificationList ref={notificationListRef} />
-    </PrimaryPageLayout>
+      <PrimaryPageLayout
+        ref={ref}
+        pageName="notifications"
+        titlebar={<NotificationListPageTitlebar />}
+        displayScrollToTopButton
+      >
+        <NotificationList ref={notificationListRef} />
+      </PrimaryPageLayout>
+    </NotificationUserPreferenceContext.Provider>
   )
 })
 NotificationListPage.displayName = 'NotificationListPage'
@@ -43,7 +64,25 @@ function NotificationListPageTitlebar() {
         <Bell />
         <div className="text-lg font-semibold">{t('Notifications')}</div>
       </div>
-      <TrustScoreFilter filterId={SPECIAL_TRUST_SCORE_FILTER_ID.NOTIFICATIONS} />
+      <HideUnrelatedNotificationsToggle />
     </div>
   )
 }
+
+function HideUnrelatedNotificationsToggle() {
+  const { t } = useTranslation()
+  const { hideIndirect, updateHideIndirect } = useNotificationUserPreference()
+
+  return (
+    <Button
+      variant="ghost"
+      className={cn(
+        'h-10 px-3 shrink-0 rounded-xl [&_svg]:size-5',
+        hideIndirect ? 'text-foreground bg-muted/40' : 'text-muted-foreground'
+      )}
+      onClick={() => updateHideIndirect(!hideIndirect)}
+    >
+      {t('Hide indirect')}
+    </Button>
+  )
+}