feat: 💨

2026-01-06 00:00:51 +08:00 · 2026-01-06 00:00:51 +08:00 · ed843f637a
commit ed843f637a
parent 695f2fe017
8 changed files with 198 additions and 197 deletions
--- a/src/components/NoteList/index.tsx
+++ b/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

+      sinceRef.current = undefined
+      setEvents([])
+      setStoredEvents([])
+      setNewEvents([])
+    }, [JSON.stringify(subRequests), refreshCount, JSON.stringify(showKinds)])
+
+    useEffect(() => {
+      if (!subRequests.length || !active) return
+
      async function init() {
        setInitialLoading(true)
-        setEvents([])
-        setStoredEvents([])
-        setNewEvents([])

        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,12 +336,35 @@ const NoteList = forwardRef<
          })
        )

+        const handleNewEvents = (newEvents: Event[]) => {
+          if (showNewNotesDirectlyRef.current) {
+            setEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
+          } else {
+            const isAtTop = (() => {
+              if (!topRef.current) return true
+              const rect = topRef.current.getBoundingClientRect()
+              return rect.top >= 50
+            })()
+
+            if (isAtTop) {
+              setEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
+            } else {
+              setNewEvents((oldEvents) => mergeTimelines([newEvents, oldEvents]))
+            }
+          }
+        }
+
        const { closer, timelineKey } = await client.subscribeTimeline(
          preprocessedSubRequests,
          {
            onEvents: (events, eosed) => {
              if (events.length > 0) {
-                setEvents(events)
+                if (!since) {
+                  setEvents(events)
+                } else {
+                  const newEvents = events.filter((evt) => evt.created_at >= since)
+                  handleNewEvents(newEvents)
+                }
              }
              if (eosed) {
                threadService.addRepliesToThread(events)
@ -333,27 +372,7 @@ const NoteList = forwardRef<
              }
            },
            onNew: (event) => {
-              if (showNewNotesDirectlyRef.current) {
-                setEvents((oldEvents) =>
-                  oldEvents.some((e) => e.id === event.id) ? oldEvents : [event, ...oldEvents]
-                )
-              } else {
-                const isAtTop = (() => {
-                  if (!topRef.current) return true
-                  const rect = topRef.current.getBoundingClientRect()
-                  return rect.top >= 50
-                })()
-
-                if (isAtTop) {
-                  setEvents((oldEvents) =>
-                    oldEvents.some((e) => e.id === event.id) ? oldEvents : [event, ...oldEvents]
-                  )
-                } else {
-                  setNewEvents((oldEvents) =>
-                    [event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
-                  )
-                }
-              }
+              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')
--- a/src/components/UserAggregationList/index.tsx
+++ b/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())
+      setStoredEvents([])
+      setEvents([])
+      setNewEvents([])
      setHasMore(true)
+    }, [feedId, refreshCount])
+
+    useEffect(() => {
+      if (!subRequests.length || !active) return

      async function init() {
        setLoading(true)
-        setStoredEvents([])
-        setEvents([])
-        setNewEvents([])
-        setHasMore(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) {
-                setEvents(events)
+                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) =>
-                [event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
-              )
+              setNewEvents((oldEvents) => mergeTimelines([[event], oldEvents]))
              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) {
--- a/src/layouts/PrimaryPageLayout/index.tsx
+++ b/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,38 +77,45 @@ const PrimaryPageLayout = forwardRef(

    if (enableSingleColumnLayout) {
      return (
-        <DeepBrowsingProvider active={current === pageName && display}>
-          <div
-            ref={smallScreenScrollAreaRef}
-            style={{
-              paddingBottom: 'calc(env(safe-area-inset-bottom) + 3rem)'
-            }}
+        <PageActiveContext.Provider value={current === pageName && display}>
+          <DeepBrowsingProvider active={current === pageName && display}>
+            <div
+              ref={smallScreenScrollAreaRef}
+              style={{
+                paddingBottom: 'calc(env(safe-area-inset-bottom) + 3rem)'
+              }}
+            >
+              <PrimaryPageTitlebar hideBottomBorder={hideTitlebarBottomBorder}>
+                {titlebar}
+              </PrimaryPageTitlebar>
+              {children}
+            </div>
+            {displayScrollToTopButton && <ScrollToTopButton />}
+          </DeepBrowsingProvider>
+        </PageActiveContext.Provider>
+      )
+    }
+
+    return (
+      <PageActiveContext.Provider value={current === pageName && display}>
+        <DeepBrowsingProvider
+          active={current === pageName && display}
+          scrollAreaRef={scrollAreaRef}
+        >
+          <ScrollArea
+            className="h-full overflow-auto"
+            scrollBarClassName="z-30 pt-12"
+            ref={scrollAreaRef}
          >
            <PrimaryPageTitlebar hideBottomBorder={hideTitlebarBottomBorder}>
              {titlebar}
            </PrimaryPageTitlebar>
            {children}
-          </div>
-          {displayScrollToTopButton && <ScrollToTopButton />}
+            <div className="h-4" />
+          </ScrollArea>
+          {displayScrollToTopButton && <ScrollToTopButton scrollAreaRef={scrollAreaRef} />}
        </DeepBrowsingProvider>
-      )
-    }
-
-    return (
-      <DeepBrowsingProvider active={current === pageName && display} scrollAreaRef={scrollAreaRef}>
-        <ScrollArea
-          className="h-full overflow-auto"
-          scrollBarClassName="z-30 pt-12"
-          ref={scrollAreaRef}
-        >
-          <PrimaryPageTitlebar hideBottomBorder={hideTitlebarBottomBorder}>
-            {titlebar}
-          </PrimaryPageTitlebar>
-          {children}
-          <div className="h-4" />
-        </ScrollArea>
-        {displayScrollToTopButton && <ScrollToTopButton scrollAreaRef={scrollAreaRef} />}
-      </DeepBrowsingProvider>
+      </PageActiveContext.Provider>
    )
  }
 )
--- a/src/layouts/SecondaryPageLayout/index.tsx
+++ b/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,11 +61,35 @@ const SecondaryPageLayout = forwardRef(

    if (enableSingleColumnLayout) {
      return (
-        <DeepBrowsingProvider active={currentIndex === index}>
-          <div
-            style={{
-              paddingBottom: 'calc(env(safe-area-inset-bottom) + 3rem)'
-            }}
+        <PageActiveContext.Provider value={currentIndex === index}>
+          <DeepBrowsingProvider active={currentIndex === index}>
+            <div
+              style={{
+                paddingBottom: 'calc(env(safe-area-inset-bottom) + 3rem)'
+              }}
+            >
+              <SecondaryPageTitlebar
+                title={title}
+                controls={controls}
+                hideBackButton={hideBackButton}
+                hideBottomBorder={hideTitlebarBottomBorder}
+                titlebar={titlebar}
+              />
+              {children}
+            </div>
+            {displayScrollToTopButton && <ScrollToTopButton />}
+          </DeepBrowsingProvider>
+        </PageActiveContext.Provider>
+      )
+    }
+
+    return (
+      <PageActiveContext.Provider value={currentIndex === index}>
+        <DeepBrowsingProvider active={currentIndex === index} scrollAreaRef={scrollAreaRef}>
+          <ScrollArea
+            className="h-full overflow-auto"
+            scrollBarClassName="z-30 pt-12"
+            ref={scrollAreaRef}
          >
            <SecondaryPageTitlebar
              title={title}
@ -74,31 +99,11 @@ const SecondaryPageLayout = forwardRef(
              titlebar={titlebar}
            />
            {children}
-          </div>
-          {displayScrollToTopButton && <ScrollToTopButton />}
+            <div className="h-4" />
+          </ScrollArea>
+          {displayScrollToTopButton && <ScrollToTopButton scrollAreaRef={scrollAreaRef} />}
        </DeepBrowsingProvider>
-      )
-    }
-
-    return (
-      <DeepBrowsingProvider active={currentIndex === index} scrollAreaRef={scrollAreaRef}>
-        <ScrollArea
-          className="h-full overflow-auto"
-          scrollBarClassName="z-30 pt-12"
-          ref={scrollAreaRef}
-        >
-          <SecondaryPageTitlebar
-            title={title}
-            controls={controls}
-            hideBackButton={hideBackButton}
-            hideBottomBorder={hideTitlebarBottomBorder}
-            titlebar={titlebar}
-          />
-          {children}
-          <div className="h-4" />
-        </ScrollArea>
-        {displayScrollToTopButton && <ScrollToTopButton scrollAreaRef={scrollAreaRef} />}
-      </DeepBrowsingProvider>
+      </PageActiveContext.Provider>
    )
  }
 )
--- a/src/lib/smart-pool.ts
+++ b/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 {
--- a/src/providers/NotificationProvider.tsx
+++ b/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,110 +87,61 @@ 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 =
-          relayList.read.length > 0 ? relayList.read.slice(0, 5) : getDefaultRelayUrls()
-        const subCloser = client.subscribe(
-          relays,
-          [
-            {
-              kinds: [
-                kinds.ShortTextNote,
-                kinds.Repost,
-                kinds.Reaction,
-                kinds.Zap,
-                ExtendedKind.COMMENT,
-                ExtendedKind.POLL_RESPONSE,
-                ExtendedKind.VOICE_COMMENT,
-                ExtendedKind.POLL
-              ],
-              '#p': [pubkey],
-              limit: 20
-            }
-          ],
+      let eosed = false
+      const relayList = await client.fetchRelayList(pubkey)
+      const relays = relayList.read.length > 0 ? relayList.read.slice(0, 5) : getDefaultRelayUrls()
+      return client.subscribe(
+        relays,
+        [
          {
-            oneose: (e) => {
-              if (e) {
-                eosed = e
-                setNewNotifications((prev) => {
-                  return [...prev.sort((a, b) => compareEvents(b, a))]
-                })
-              }
-            },
-            onevent: (evt) => {
-              if (evt.pubkey !== pubkey) {
-                setNewNotifications((prev) => {
-                  if (!eosed) {
-                    return [evt, ...prev]
-                  }
-                  if (prev.length && compareEvents(prev[0], evt) >= 0) {
-                    return prev
-                  }
-
-                  client.emitNewEvent(evt, relays)
+            kinds: [
+              kinds.ShortTextNote,
+              kinds.Repost,
+              kinds.GenericRepost,
+              kinds.Reaction,
+              kinds.Zap,
+              kinds.Highlights,
+              ExtendedKind.COMMENT,
+              ExtendedKind.POLL_RESPONSE,
+              ExtendedKind.VOICE_COMMENT,
+              ExtendedKind.POLL
+            ],
+            '#p': [pubkey],
+            limit: 20
+          }
+        ],
+        {
+          oneose: (e) => {
+            if (e) {
+              eosed = e
+              setNewNotifications((prev) => {
+                return [...prev.sort((a, b) => compareEvents(b, a))]
+              })
+            }
+          },
+          onevent: (evt) => {
+            if (evt.pubkey !== pubkey) {
+              setNewNotifications((prev) => {
+                if (!eosed) {
                  return [evt, ...prev]
-                })
-              }
-            },
-            onAllClose: (reasons) => {
-              if (reasons.every((reason) => reason === 'closed by caller')) {
-                return
-              }
+                }
+                if (prev.length && compareEvents(prev[0], evt) >= 0) {
+                  return prev
+                }

-              // Only reconnect if still mounted and not a manual close
-              if (isMountedRef.current) {
-                setTimeout(() => {
-                  if (isMountedRef.current) {
-                    subscribe()
-                  }
-                }, 5_000)
-              }
+                client.emitNewEvent(evt, relays)
+                return [evt, ...prev]
+              })
            }
          }
-        )
-
-        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
-    subscribe()
-
-    // Cleanup function
+    const promise = subscribe()
    return () => {
-      isMountedRef.current = false
-      if (subCloserRef.current) {
-        subCloserRef.current.close()
-        subCloserRef.current = null
-      }
+      promise.then((closer) => closer.close())
    }
  }, [pubkey])

--- a/src/providers/PageActiveProvider.tsx
+++ b/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
+}
--- a/src/routes/primary.tsx
+++ b/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 = {
-  key: string
-  component: ForwardRefExoticComponent<RefAttributes<TPageRef>>
-}
-
-const PRIMARY_ROUTE_CONFIGS: RouteConfig[] = [
+const PRIMARY_ROUTE_CONFIGS = [
  { 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