feat: 💨

src/components/NoteList/index.tsx

@@ -10,6 +10,7 @@ import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { useDeletedEvent } from '@/providers/DeletedEventProvider'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
+import { usePageActive } from '@/providers/PageActiveProvider'
 import { useUserTrust } from '@/providers/UserTrustProvider'
 import client from '@/services/client.service'
 import threadService from '@/services/thread.service'
@@ -75,6 +76,7 @@ const NoteList = forwardRef<
     ref
   ) => {
     const { t } = useTranslation()
+    const active = usePageActive()
     const { startLogin } = useNostr()
     const { isSpammer, meetsMinTrustScore } = useUserTrust()
     const { mutePubkeySet } = useMuteList()
@@ -93,6 +95,12 @@ const NoteList = forwardRef<
     const [refreshCount, setRefreshCount] = useState(0)
     const supportTouch = useMemo(() => isTouchDevice(), [])
     const topRef = useRef<HTMLDivElement | null>(null)
+    const sinceRef = useRef<number | undefined>(undefined)
+    sinceRef.current = newEvents.length
+      ? newEvents[0].created_at + 1
+      : events.length
+        ? events[0].created_at + 1
+        : undefined
     const showNewNotesDirectlyRef = useRef(showNewNotesDirectly)
     showNewNotesDirectlyRef.current = showNewNotesDirectly
 
@@ -287,16 +295,24 @@ const NoteList = forwardRef<
     useEffect(() => {
       if (!subRequests.length) return
 
-      async function init() {
+      sinceRef.current = undefined
-        setInitialLoading(true)
       setEvents([])
       setStoredEvents([])
       setNewEvents([])
+    }, [JSON.stringify(subRequests), refreshCount, JSON.stringify(showKinds)])
+
+    useEffect(() => {
+      if (!subRequests.length || !active) return
+
+      async function init() {
+        setInitialLoading(true)
 
         if (showKinds?.length === 0 && subRequests.every(({ filter }) => !filter.kinds)) {
           return () => {}
         }
 
+        const since = sinceRef.current
+
         if (isPubkeyFeed) {
           const storedEvents = await client.getEventsFromIndexed({
             authors: subRequests.flatMap(({ filter }) => filter.authors ?? []),
@@ -320,23 +336,9 @@ const NoteList = forwardRef<
           })
         )
 
-        const { closer, timelineKey } = await client.subscribeTimeline(
+        const handleNewEvents = (newEvents: Event[]) => {
-          preprocessedSubRequests,
-          {
-            onEvents: (events, eosed) => {
-              if (events.length > 0) {
-                setEvents(events)
-              }
-              if (eosed) {
-                threadService.addRepliesToThread(events)
-                setInitialLoading(false)
-              }
-            },
-            onNew: (event) => {
           if (showNewNotesDirectlyRef.current) {
-                setEvents((oldEvents) =>
+            setEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
-                  oldEvents.some((e) => e.id === event.id) ? oldEvents : [event, ...oldEvents]
-                )
           } else {
             const isAtTop = (() => {
               if (!topRef.current) return true
@@ -345,15 +347,32 @@ const NoteList = forwardRef<
             })()
 
             if (isAtTop) {
-                  setEvents((oldEvents) =>
+              setEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
-                    oldEvents.some((e) => e.id === event.id) ? oldEvents : [event, ...oldEvents]
-                  )
             } else {
-                  setNewEvents((oldEvents) =>
+              setNewEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
-                    [event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
-                  )
             }
           }
+        }
+
+        const { closer, timelineKey } = await client.subscribeTimeline(
+          preprocessedSubRequests,
+          {
+            onEvents: (events, eosed) => {
+              if (events.length > 0) {
+                if (!since) {
+                  setEvents(events)
+                } else {
+                  const newEvents = events.filter((evt) => evt.created_at >= since)
+                  handleNewEvents(newEvents)
+                }
+              }
+              if (eosed) {
+                threadService.addRepliesToThread(events)
+                setInitialLoading(false)
+              }
+            },
+            onNew: (event) => {
+              handleNewEvents([event])
               threadService.addRepliesToThread([event])
             },
             onClose: (url, reason) => {
@@ -388,7 +407,7 @@ const NoteList = forwardRef<
       return () => {
         promise.then((closer) => closer())
       }
-    }, [JSON.stringify(subRequests), refreshCount, JSON.stringify(showKinds)])
+    }, [JSON.stringify(subRequests), refreshCount, JSON.stringify(showKinds), active])
 
     const handleLoadMore = useCallback(async () => {
       if (!timelineKey || areAlgoRelays) return false
@@ -412,7 +431,7 @@ const NoteList = forwardRef<
     })
 
     const showNewEvents = () => {
-      setEvents((oldEvents) => [...newEvents, ...oldEvents])
+      setEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
       setNewEvents([])
       setTimeout(() => {
         scrollToTop('smooth')

src/components/UserAggregationList/index.tsx

@@ -12,6 +12,7 @@ import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { useDeletedEvent } from '@/providers/DeletedEventProvider'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
+import { usePageActive } from '@/providers/PageActiveProvider'
 import { usePinnedUsers } from '@/providers/PinnedUsersProvider'
 import { useUserTrust } from '@/providers/UserTrustProvider'
 import client from '@/services/client.service'
@@ -68,6 +69,7 @@ const UserAggregationList = forwardRef<
     ref
   ) => {
     const { t } = useTranslation()
+    const active = usePageActive()
     const { pubkey: currentPubkey, startLogin } = useNostr()
     const { push } = useSecondaryPage()
     const { mutePubkeySet } = useMuteList()
@@ -95,6 +97,12 @@ const UserAggregationList = forwardRef<
     const bottomRef = useRef<HTMLDivElement | null>(null)
     const topRef = useRef<HTMLDivElement | null>(null)
     const nonPinnedTopRef = useRef<HTMLDivElement | null>(null)
+    const sinceRef = useRef<number | undefined>(undefined)
+    sinceRef.current = newEvents.length
+      ? newEvents[0].created_at + 1
+      : events.length
+        ? events[0].created_at + 1
+        : undefined
 
     const scrollToTop = (behavior: ScrollBehavior = 'instant') => {
       setTimeout(() => {
@@ -120,15 +128,19 @@ const UserAggregationList = forwardRef<
     useEffect(() => {
       if (!subRequests.length) return
 
+      sinceRef.current = undefined
       setSince(dayjs().subtract(1, 'day').unix())
-      setHasMore(true)
-
-      async function init() {
-        setLoading(true)
       setStoredEvents([])
       setEvents([])
       setNewEvents([])
       setHasMore(true)
+    }, [feedId, refreshCount])
+
+    useEffect(() => {
+      if (!subRequests.length || !active) return
+
+      async function init() {
+        setLoading(true)
 
         if (showKinds?.length === 0 && subRequests.every(({ filter }) => !filter.kinds)) {
           setLoading(false)
@@ -136,6 +148,8 @@ const UserAggregationList = forwardRef<
           return () => {}
         }
 
+        const since = sinceRef.current
+
         if (isPubkeyFeed) {
           const storedEvents = await client.getEventsFromIndexed({
             authors: subRequests.flatMap(({ filter }) => filter.authors ?? []),
@@ -164,21 +178,23 @@ const UserAggregationList = forwardRef<
           {
             onEvents: (events, eosed) => {
               if (events.length > 0) {
+                if (!since) {
                   setEvents(events)
+                } else {
+                  const newEvents = events.filter((evt) => evt.created_at >= since)
+                  setNewEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
+                }
               }
               if (areAlgoRelays) {
                 setHasMore(false)
               }
               if (eosed) {
                 setLoading(false)
-                setHasMore(events.length > 0)
                 threadService.addRepliesToThread(events)
               }
             },
             onNew: (event) => {
-              setNewEvents((oldEvents) =>
+              setNewEvents((oldEvents) => mergeTimelines([[event], oldEvents]))
-                [event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
-              )
               threadService.addRepliesToThread([event])
             },
             onClose: (url, reason) => {
@@ -214,7 +230,7 @@ const UserAggregationList = forwardRef<
       return () => {
         promise.then((closer) => closer())
       }
-    }, [feedId, refreshCount])
+    }, [feedId, refreshCount, active])
 
     useEffect(() => {
       if (loading || !hasMore || !timelineKey || !events.length) {

src/layouts/PrimaryPageLayout/index.tsx

@@ -4,6 +4,7 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import { usePrimaryPage } from '@/PageManager'
 import { DeepBrowsingProvider } from '@/providers/DeepBrowsingProvider'
 import { useNostr } from '@/providers/NostrProvider'
+import { PageActiveContext } from '@/providers/PageActiveProvider'
 import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { TPrimaryPageName } from '@/routes/primary'
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
@@ -76,6 +77,7 @@ const PrimaryPageLayout = forwardRef(
 
     if (enableSingleColumnLayout) {
       return (
+        <PageActiveContext.Provider value={current === pageName && display}>
           <DeepBrowsingProvider active={current === pageName && display}>
             <div
               ref={smallScreenScrollAreaRef}
@@ -90,11 +92,16 @@ const PrimaryPageLayout = forwardRef(
             </div>
             {displayScrollToTopButton && <ScrollToTopButton />}
           </DeepBrowsingProvider>
+        </PageActiveContext.Provider>
       )
     }
 
     return (
-      <DeepBrowsingProvider active={current === pageName && display} scrollAreaRef={scrollAreaRef}>
+      <PageActiveContext.Provider value={current === pageName && display}>
+        <DeepBrowsingProvider
+          active={current === pageName && display}
+          scrollAreaRef={scrollAreaRef}
+        >
           <ScrollArea
             className="h-full overflow-auto"
             scrollBarClassName="z-30 pt-12"
@@ -108,6 +115,7 @@ const PrimaryPageLayout = forwardRef(
           </ScrollArea>
           {displayScrollToTopButton && <ScrollToTopButton scrollAreaRef={scrollAreaRef} />}
         </DeepBrowsingProvider>
+      </PageActiveContext.Provider>
     )
   }
 )

src/layouts/SecondaryPageLayout/index.tsx

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { useSecondaryPage } from '@/PageManager'
 import { DeepBrowsingProvider } from '@/providers/DeepBrowsingProvider'
+import { PageActiveContext } from '@/providers/PageActiveProvider'
 import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { ChevronLeft } from 'lucide-react'
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
@@ -60,6 +61,7 @@ const SecondaryPageLayout = forwardRef(
 
     if (enableSingleColumnLayout) {
       return (
+        <PageActiveContext.Provider value={currentIndex === index}>
           <DeepBrowsingProvider active={currentIndex === index}>
             <div
               style={{
@@ -77,10 +79,12 @@ const SecondaryPageLayout = forwardRef(
             </div>
             {displayScrollToTopButton && <ScrollToTopButton />}
           </DeepBrowsingProvider>
+        </PageActiveContext.Provider>
       )
     }
 
     return (
+      <PageActiveContext.Provider value={currentIndex === index}>
         <DeepBrowsingProvider active={currentIndex === index} scrollAreaRef={scrollAreaRef}>
           <ScrollArea
             className="h-full overflow-auto"
@@ -99,6 +103,7 @@ const SecondaryPageLayout = forwardRef(
           </ScrollArea>
           {displayScrollToTopButton && <ScrollToTopButton scrollAreaRef={scrollAreaRef} />}
         </DeepBrowsingProvider>
+      </PageActiveContext.Provider>
     )
   }
 )

src/lib/smart-pool.ts

@@ -3,7 +3,7 @@ import { AbstractRelay } from 'nostr-tools/abstract-relay'
 
 const DEFAULT_CONNECTION_TIMEOUT = 10 * 1000 // 10 seconds
 const CLEANUP_THRESHOLD = 15 // number of relays to trigger cleanup
-const CLEANUP_INTERVAL = 5 * 1000 // 5 seconds
+const CLEANUP_INTERVAL = 30 * 1000 // 30 seconds
 const IDLE_TIMEOUT = 10 * 1000 // 10 seconds
 
 export class SmartPool extends SimplePool {

src/providers/NotificationProvider.tsx

@@ -6,7 +6,6 @@ import { usePrimaryPage } from '@/PageManager'
 import client from '@/services/client.service'
 import storage from '@/services/local-storage.service'
 import { kinds, NostrEvent } from 'nostr-tools'
-import { SubCloser } from 'nostr-tools/abstract-pool'
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { useContentPolicy } from './ContentPolicyProvider'
 import { useMuteList } from './MuteListProvider'
@@ -88,33 +87,21 @@ export function NotificationProvider({ children }: { children: React.ReactNode }
     setNewNotifications([])
     setReadNotificationIdSet(new Set())
 
-    // Track if component is mounted
-    const isMountedRef = { current: true }
-    const subCloserRef: {
-      current: SubCloser | null
-    } = { current: null }
-
     const subscribe = async () => {
-      if (subCloserRef.current) {
-        subCloserRef.current.close()
-        subCloserRef.current = null
-      }
-      if (!isMountedRef.current) return null
-
-      try {
       let eosed = false
       const relayList = await client.fetchRelayList(pubkey)
-        const relays =
+      const relays = relayList.read.length > 0 ? relayList.read.slice(0, 5) : getDefaultRelayUrls()
-          relayList.read.length > 0 ? relayList.read.slice(0, 5) : getDefaultRelayUrls()
+      return client.subscribe(
-        const subCloser = client.subscribe(
         relays,
         [
           {
             kinds: [
               kinds.ShortTextNote,
               kinds.Repost,
+              kinds.GenericRepost,
               kinds.Reaction,
               kinds.Zap,
+              kinds.Highlights,
               ExtendedKind.COMMENT,
               ExtendedKind.POLL_RESPONSE,
               ExtendedKind.VOICE_COMMENT,
@@ -147,51 +134,14 @@ export function NotificationProvider({ children }: { children: React.ReactNode }
                 return [evt, ...prev]
               })
             }
-            },
-            onAllClose: (reasons) => {
-              if (reasons.every((reason) => reason === 'closed by caller')) {
-                return
-              }
-
-              // Only reconnect if still mounted and not a manual close
-              if (isMountedRef.current) {
-                setTimeout(() => {
-                  if (isMountedRef.current) {
-                    subscribe()
-                  }
-                }, 5_000)
-              }
           }
         }
       )
-
-        subCloserRef.current = subCloser
-        return subCloser
-      } catch (error) {
-        console.error('Subscription error:', error)
-
-        // Retry on error if still mounted
-        if (isMountedRef.current) {
-          setTimeout(() => {
-            if (isMountedRef.current) {
-              subscribe()
-            }
-          }, 5_000)
-        }
-        return null
-      }
     }
 
-    // Initial subscription
+    const promise = subscribe()
-    subscribe()
-
-    // Cleanup function
     return () => {
-      isMountedRef.current = false
+      promise.then((closer) => closer.close())
-      if (subCloserRef.current) {
-        subCloserRef.current.close()
-        subCloserRef.current = null
-      }
     }
   }, [pubkey])
 

src/providers/PageActiveProvider.tsx

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react'
+
+export const PageActiveContext = createContext<boolean | null>(null)
+
+export function usePageActive() {
+  const ctx = useContext(PageActiveContext)
+  return ctx ?? false
+}

src/routes/primary.tsx

@@ -8,14 +8,9 @@ import RelayPage from '@/pages/primary/RelayPage'
 import SearchPage from '@/pages/primary/SearchPage'
 import SettingsPage from '@/pages/primary/SettingsPage'
 import { TPageRef } from '@/types'
-import { createRef, ForwardRefExoticComponent, RefAttributes } from 'react'
+import { createRef } from 'react'
 
-type RouteConfig = {
+const PRIMARY_ROUTE_CONFIGS = [
-  key: string
-  component: ForwardRefExoticComponent<RefAttributes<TPageRef>>
-}
-
-const PRIMARY_ROUTE_CONFIGS: RouteConfig[] = [
   { key: 'home', component: NoteListPage },
   { key: 'explore', component: ExplorePage },
   { key: 'notifications', component: NotificationListPage },
@@ -25,7 +20,7 @@ const PRIMARY_ROUTE_CONFIGS: RouteConfig[] = [
   { key: 'search', component: SearchPage },
   { key: 'bookmark', component: BookmarkPage },
   { key: 'settings', component: SettingsPage }
-]
+] as const
 
 export const PRIMARY_PAGE_REF_MAP = PRIMARY_ROUTE_CONFIGS.reduce(
   (acc, { key }) => {
@@ -40,7 +35,7 @@ export const PRIMARY_PAGE_MAP = PRIMARY_ROUTE_CONFIGS.reduce(
     acc[key] = <Component ref={PRIMARY_PAGE_REF_MAP[key]} />
     return acc
   },
-  {} as Record<string, JSX.Element>
+  {} as Record<(typeof PRIMARY_ROUTE_CONFIGS)[number]['key'], JSX.Element>
 )
 
 export type TPrimaryPageName = keyof typeof PRIMARY_PAGE_MAP