feat: 💨

src/components/NormalFeed/index.tsx

@@ -92,6 +92,8 @@ export default function NormalFeed({
           showKinds={temporaryShowKinds}
           subRequests={subRequests}
           filterFn={filterFn}
+          areAlgoRelays={areAlgoRelays}
+          showRelayCloseReason={showRelayCloseReason}
         />
       ) : (
         <NoteList

src/components/UserAggregationList/index.tsx

@@ -12,6 +12,7 @@ import { useDeletedEvent } from '@/providers/DeletedEventProvider'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { usePinnedUsers } from '@/providers/PinnedUsersProvider'
+import { useReply } from '@/providers/ReplyProvider'
 import { useUserTrust } from '@/providers/UserTrustProvider'
 import client from '@/services/client.service'
 import userAggregationService, { TUserAggregation } from '@/services/user-aggregation.service'
@@ -30,7 +31,9 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import PullToRefresh from 'react-simple-pull-to-refresh'
+import { toast } from 'sonner'
 import { LoadingBar } from '../LoadingBar'
+import NewNotesButton from '../NewNotesButton'
 
 const LIMIT = 500
 const SHOW_COUNT = 20
@@ -47,321 +50,375 @@ const UserAggregationList = forwardRef<
     showKinds?: number[]
     filterFn?: (event: Event) => boolean
     filterMutedNotes?: boolean
+    areAlgoRelays?: boolean
+    showRelayCloseReason?: boolean
   }
->(({ subRequests, showKinds, filterFn, filterMutedNotes = true }, ref) => {
+>(
-  const { t } = useTranslation()
+  (
-  const { startLogin } = useNostr()
+    {
-  const { push } = useSecondaryPage()
+      subRequests,
-  const { hideUntrustedNotes, isUserTrusted } = useUserTrust()
+      showKinds,
-  const { mutePubkeySet } = useMuteList()
+      filterFn,
-  const { pinnedPubkeySet } = usePinnedUsers()
+      filterMutedNotes = true,
-  const { hideContentMentioningMutedUsers } = useContentPolicy()
+      areAlgoRelays = false,
-  const { isEventDeleted } = useDeletedEvent()
+      showRelayCloseReason = false
-  const [since, setSince] = useState(() => dayjs().subtract(1, 'day').unix())
+    },
-  const [events, setEvents] = useState<Event[]>([])
+    ref
-  const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
+  ) => {
-  const [loading, setLoading] = useState(true)
+    const { t } = useTranslation()
-  const [showLoadingBar, setShowLoadingBar] = useState(true)
+    const { startLogin } = useNostr()
-  const [refreshCount, setRefreshCount] = useState(0)
+    const { push } = useSecondaryPage()
-  const [showCount, setShowCount] = useState(SHOW_COUNT)
+    const { hideUntrustedNotes, isUserTrusted } = useUserTrust()
-  const [hasMore, setHasMore] = useState(true)
+    const { mutePubkeySet } = useMuteList()
-  const supportTouch = useMemo(() => isTouchDevice(), [])
+    const { pinnedPubkeySet } = usePinnedUsers()
-  const feedId = useMemo(() => {
+    const { hideContentMentioningMutedUsers } = useContentPolicy()
-    return userAggregationService.getFeedId(subRequests, showKinds)
+    const { isEventDeleted } = useDeletedEvent()
-  }, [JSON.stringify(subRequests), JSON.stringify(showKinds)])
+    const { addReplies } = useReply()
-  const bottomRef = useRef<HTMLDivElement | null>(null)
+    const [since, setSince] = useState(() => dayjs().subtract(1, 'day').unix())
-  const topRef = useRef<HTMLDivElement | null>(null)
+    const [events, setEvents] = useState<Event[]>([])
+    const [newEvents, setNewEvents] = useState<Event[]>([])
+    const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
+    const [loading, setLoading] = useState(true)
+    const [showLoadingBar, setShowLoadingBar] = useState(true)
+    const [refreshCount, setRefreshCount] = useState(0)
+    const [showCount, setShowCount] = useState(SHOW_COUNT)
+    const [hasMore, setHasMore] = useState(true)
+    const supportTouch = useMemo(() => isTouchDevice(), [])
+    const feedId = useMemo(() => {
+      return userAggregationService.getFeedId(subRequests, showKinds)
+    }, [JSON.stringify(subRequests), JSON.stringify(showKinds)])
+    const bottomRef = useRef<HTMLDivElement | null>(null)
+    const topRef = useRef<HTMLDivElement | null>(null)
 
-  const scrollToTop = (behavior: ScrollBehavior = 'instant') => {
+    const scrollToTop = (behavior: ScrollBehavior = 'instant') => {
-    setTimeout(() => {
+      setTimeout(() => {
-      topRef.current?.scrollIntoView({ behavior, block: 'start' })
+        topRef.current?.scrollIntoView({ behavior, block: 'start' })
-    }, 20)
+      }, 20)
-  }
-
-  const refresh = () => {
-    scrollToTop()
-    setTimeout(() => {
-      setRefreshCount((count) => count + 1)
-    }, 500)
-  }
-
-  useImperativeHandle(ref, () => ({ scrollToTop, refresh }), [])
-
-  useEffect(() => {
-    return () => {
-      userAggregationService.clearAggregations(feedId)
     }
-  }, [feedId])
 
-  useEffect(() => {
+    const refresh = () => {
-    if (!subRequests.length) return
+      scrollToTop()
+      setTimeout(() => {
+        setRefreshCount((count) => count + 1)
+      }, 500)
+    }
 
-    setSince(dayjs().subtract(1, 'day').unix())
+    useImperativeHandle(ref, () => ({ scrollToTop, refresh }), [])
-    setHasMore(true)
 
-    async function init() {
+    useEffect(() => {
-      setLoading(true)
+      return () => {
-      setEvents([])
+        userAggregationService.clearAggregations(feedId)
-
-      if (showKinds?.length === 0 && subRequests.every(({ filter }) => !filter.kinds)) {
-        setLoading(false)
-        return () => {}
       }
+    }, [feedId])
 
-      const { closer, timelineKey } = await client.subscribeTimeline(
+    useEffect(() => {
-        subRequests.map(({ urls, filter }) => ({
+      if (!subRequests.length) return
-          urls,
+
-          filter: {
+      setSince(dayjs().subtract(1, 'day').unix())
-            kinds: showKinds ?? [],
+      setHasMore(true)
-            ...filter,
+
-            limit: LIMIT
+      async function init() {
-          }
+        setLoading(true)
-        })),
+        setEvents([])
-        {
+        setNewEvents([])
-          onEvents: (events, eosed) => {
+        setHasMore(true)
-            if (events.length > 0) {
+
-              setEvents(events)
+        if (showKinds?.length === 0 && subRequests.every(({ filter }) => !filter.kinds)) {
+          setLoading(false)
+          setHasMore(false)
+          return () => {}
+        }
+
+        const { closer, timelineKey } = await client.subscribeTimeline(
+          subRequests.map(({ urls, filter }) => ({
+            urls,
+            filter: {
+              kinds: showKinds ?? [],
+              ...filter,
+              limit: LIMIT
             }
-            if (eosed) {
+          })),
-              setLoading(false)
+          {
-              if (events.length === 0) {
+            onEvents: (events, eosed) => {
+              if (events.length > 0) {
+                setEvents(events)
+              }
+              if (areAlgoRelays) {
                 setHasMore(false)
               }
+              if (eosed) {
+                setLoading(false)
+                setHasMore(events.length > 0)
+                addReplies(events)
+              }
+            },
+            onNew: (event) => {
+              setNewEvents((oldEvents) =>
+                [event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
+              )
+              addReplies([event])
+            },
+            onClose: (url, reason) => {
+              if (!showRelayCloseReason) return
+              // ignore reasons from nostr-tools
+              if (
+                [
+                  'closed by caller',
+                  'relay connection errored',
+                  'relay connection closed',
+                  'pingpong timed out',
+                  'relay connection closed by us'
+                ].includes(reason)
+              ) {
+                return
+              }
+
+              toast.error(`${url}: ${reason}`)
             }
           },
-          onNew: (event) => {
+          {
-            setEvents((oldEvents) => {
+            startLogin,
-              const newEvents = oldEvents.some((e) => e.id === event.id)
+            needSort: !areAlgoRelays
-                ? oldEvents
-                : [event, ...oldEvents]
-              return newEvents
-            })
           }
-        },
+        )
-        {
+        setTimelineKey(timelineKey)
-          startLogin,
+
-          needSort: true
+        return closer
+      }
+
+      const promise = init()
+      return () => {
+        promise.then((closer) => closer())
+      }
+    }, [feedId, refreshCount])
+
+    useEffect(() => {
+      if (loading || !hasMore || !timelineKey || !events.length) {
+        return
+      }
+
+      const until = events[events.length - 1].created_at - 1
+      if (until < since) {
+        return
+      }
+
+      setLoading(true)
+      client.loadMoreTimeline(timelineKey, until, LIMIT).then((moreEvents) => {
+        if (moreEvents.length === 0) {
+          setHasMore(false)
+          setLoading(false)
+          return
         }
-      )
+        setEvents((oldEvents) => [...oldEvents, ...moreEvents])
-      setTimelineKey(timelineKey)
-
-      return closer
-    }
-
-    const promise = init()
-    return () => {
-      promise.then((closer) => closer())
-    }
-  }, [feedId, refreshCount])
-
-  useEffect(() => {
-    if (loading || !hasMore || !timelineKey || !events.length) {
-      return
-    }
-
-    const until = events[events.length - 1].created_at - 1
-    if (until < since) {
-      return
-    }
-
-    setLoading(true)
-    client.loadMoreTimeline(timelineKey, until, LIMIT).then((moreEvents) => {
-      if (moreEvents.length === 0) {
-        setHasMore(false)
         setLoading(false)
+      })
+    }, [loading, timelineKey, events, since, hasMore])
+
+    useEffect(() => {
+      if (loading) {
+        setShowLoadingBar(true)
         return
       }
-      setEvents((oldEvents) => [...oldEvents, ...moreEvents])
-      setLoading(false)
-    })
-  }, [loading, timelineKey, events, since, hasMore])
 
-  useEffect(() => {
+      const timeout = setTimeout(() => {
-    if (loading) {
+        setShowLoadingBar(false)
-      setShowLoadingBar(true)
+      }, 1000)
-      return
-    }
 
-    const timeout = setTimeout(() => {
+      return () => clearTimeout(timeout)
-      setShowLoadingBar(false)
+    }, [loading])
-    }, 1000)
 
-    return () => clearTimeout(timeout)
+    const shouldHideEvent = useCallback(
-  }, [loading])
+      (evt: Event) => {
+        if (isEventDeleted(evt)) return true
+        if (hideUntrustedNotes && !isUserTrusted(evt.pubkey)) return true
+        if (filterMutedNotes && mutePubkeySet.has(evt.pubkey)) return true
+        if (
+          filterMutedNotes &&
+          hideContentMentioningMutedUsers &&
+          isMentioningMutedUsers(evt, mutePubkeySet)
+        ) {
+          return true
+        }
+        if (filterFn && !filterFn(evt)) {
+          return true
+        }
 
-  const shouldHideEvent = useCallback(
+        return false
-    (evt: Event) => {
+      },
-      if (isEventDeleted(evt)) return true
+      [hideUntrustedNotes, mutePubkeySet, isEventDeleted, filterFn]
-      if (hideUntrustedNotes && !isUserTrusted(evt.pubkey)) return true
+    )
-      if (filterMutedNotes && mutePubkeySet.has(evt.pubkey)) return true
+
-      if (
+    const lastXDays = useMemo(() => {
-        filterMutedNotes &&
+      return dayjs().diff(dayjs.unix(since), 'day')
-        hideContentMentioningMutedUsers &&
+    }, [since])
-        isMentioningMutedUsers(evt, mutePubkeySet)
+
-      ) {
+    const filteredEvents = useMemo(() => {
-        return true
+      return events.filter((evt) => evt.created_at >= since && !shouldHideEvent(evt))
+    }, [events, since, shouldHideEvent])
+
+    const filteredNewEvents = useMemo(() => {
+      return newEvents.filter((evt) => evt.created_at >= since && !shouldHideEvent(evt))
+    }, [newEvents, since, shouldHideEvent])
+
+    const aggregations = useMemo(() => {
+      const aggs = userAggregationService.aggregateByUser(filteredEvents)
+      userAggregationService.saveAggregations(feedId, aggs)
+      return aggs
+    }, [feedId, filteredEvents])
+
+    const pinnedAggregations = useMemo(() => {
+      return aggregations.filter((agg) => pinnedPubkeySet.has(agg.pubkey))
+    }, [aggregations, pinnedPubkeySet])
+
+    const normalAggregations = useMemo(() => {
+      return aggregations.filter((agg) => !pinnedPubkeySet.has(agg.pubkey))
+    }, [aggregations, pinnedPubkeySet])
+
+    const displayedNormalAggregations = useMemo(() => {
+      return normalAggregations.slice(0, showCount)
+    }, [normalAggregations, showCount])
+
+    const hasMoreToDisplay = useMemo(() => {
+      return normalAggregations.length > displayedNormalAggregations.length
+    }, [normalAggregations, displayedNormalAggregations])
+
+    useEffect(() => {
+      const options = {
+        root: null,
+        rootMargin: '10px',
+        threshold: 1
       }
-      if (filterFn && !filterFn(evt)) {
+      if (!hasMoreToDisplay) return
-        return true
+
+      const observerInstance = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
+          setShowCount((count) => count + SHOW_COUNT)
+        }
+      }, options)
+
+      const currentBottomRef = bottomRef.current
+      if (currentBottomRef) {
+        observerInstance.observe(currentBottomRef)
       }
 
-      return false
+      return () => {
-    },
+        if (observerInstance && currentBottomRef) {
-    [hideUntrustedNotes, mutePubkeySet, isEventDeleted, filterFn]
+          observerInstance.unobserve(currentBottomRef)
-  )
+        }
-
-  const lastXDays = useMemo(() => {
-    return dayjs().diff(dayjs.unix(since), 'day')
-  }, [since])
-
-  const filteredEvents = useMemo(() => {
-    return events.filter((evt) => evt.created_at >= since && !shouldHideEvent(evt))
-  }, [events, since, shouldHideEvent])
-
-  const aggregations = useMemo(() => {
-    const aggs = userAggregationService.aggregateByUser(filteredEvents)
-    userAggregationService.saveAggregations(feedId, aggs)
-    return aggs
-  }, [feedId, filteredEvents])
-
-  const pinnedAggregations = useMemo(() => {
-    return aggregations.filter((agg) => pinnedPubkeySet.has(agg.pubkey))
-  }, [aggregations, pinnedPubkeySet])
-
-  const normalAggregations = useMemo(() => {
-    return aggregations.filter((agg) => !pinnedPubkeySet.has(agg.pubkey))
-  }, [aggregations, pinnedPubkeySet])
-
-  const displayedNormalAggregations = useMemo(() => {
-    return normalAggregations.slice(0, showCount)
-  }, [normalAggregations, showCount])
-
-  const hasMoreToDisplay = useMemo(() => {
-    return normalAggregations.length > displayedNormalAggregations.length
-  }, [normalAggregations, displayedNormalAggregations])
-
-  useEffect(() => {
-    const options = {
-      root: null,
-      rootMargin: '10px',
-      threshold: 1
-    }
-    if (!hasMoreToDisplay) return
-
-    const observerInstance = new IntersectionObserver((entries) => {
-      if (entries[0].isIntersecting) {
-        setShowCount((count) => count + SHOW_COUNT)
       }
-    }, options)
+    }, [hasMoreToDisplay])
 
-    const currentBottomRef = bottomRef.current
+    const handleViewUser = (agg: TUserAggregation) => {
-    if (currentBottomRef) {
+      // Mark as viewed when user clicks
-      observerInstance.observe(currentBottomRef)
+      userAggregationService.markAsViewed(feedId, agg.pubkey)
-    }
 
-    return () => {
+      if (agg.count === 1) {
-      if (observerInstance && currentBottomRef) {
+        const evt = agg.events[0]
-        observerInstance.unobserve(currentBottomRef)
+        if (evt.kind !== kinds.Repost && evt.kind !== kinds.GenericRepost) {
+          push(toNote(agg.events[0]))
+          return
+        }
       }
-    }
-  }, [hasMoreToDisplay])
 
-  const handleViewUser = (agg: TUserAggregation) => {
+      push(toUserAggregationDetail(feedId, agg.pubkey))
-    // Mark as viewed when user clicks
-    userAggregationService.markAsViewed(feedId, agg.pubkey)
-
-    if (agg.count === 1) {
-      const evt = agg.events[0]
-      if (evt.kind !== kinds.Repost && evt.kind !== kinds.GenericRepost) {
-        push(toNote(agg.events[0]))
-        return
-      }
     }
 
-    push(toUserAggregationDetail(feedId, agg.pubkey))
+    const handleLoadEarlier = () => {
-  }
+      setSince((prevSince) => dayjs.unix(prevSince).subtract(1, 'day').unix())
+      setShowCount(SHOW_COUNT)
+    }
 
-  const handleLoadEarlier = () => {
+    const showNewEvents = () => {
-    setSince((prevSince) => dayjs.unix(prevSince).subtract(1, 'day').unix())
+      setEvents((oldEvents) => [...newEvents, ...oldEvents])
-    setShowCount(SHOW_COUNT)
+      setNewEvents([])
-  }
+      setTimeout(() => {
+        scrollToTop('smooth')
+      }, 0)
+    }
 
-  const list = (
+    const list = (
-    <div className="min-h-screen">
+      <div className="min-h-screen">
-      {pinnedAggregations.map((agg) => (
+        {pinnedAggregations.map((agg) => (
-        <UserAggregationItem
+          <UserAggregationItem
-          key={agg.pubkey}
+            key={agg.pubkey}
-          feedId={feedId}
+            feedId={feedId}
-          aggregation={agg}
+            aggregation={agg}
-          onClick={() => handleViewUser(agg)}
+            onClick={() => handleViewUser(agg)}
-        />
+          />
-      ))}
+        ))}
 
-      {normalAggregations.map((agg) => (
+        {normalAggregations.map((agg) => (
-        <UserAggregationItem
+          <UserAggregationItem
-          key={agg.pubkey}
+            key={agg.pubkey}
-          feedId={feedId}
+            feedId={feedId}
-          aggregation={agg}
+            aggregation={agg}
-          onClick={() => handleViewUser(agg)}
+            onClick={() => handleViewUser(agg)}
-        />
+          />
-      ))}
+        ))}
 
-      {loading || hasMoreToDisplay ? (
+        {loading || hasMoreToDisplay ? (
-        <div ref={bottomRef}>
+          <div ref={bottomRef}>
-          <UserAggregationItemSkeleton />
+            <UserAggregationItemSkeleton />
-        </div>
+          </div>
-      ) : aggregations.length === 0 ? (
+        ) : aggregations.length === 0 ? (
-        <div className="flex justify-center w-full mt-2">
+          <div className="flex justify-center w-full mt-2">
-          <Button size="lg" onClick={() => setRefreshCount((count) => count + 1)}>
+            <Button size="lg" onClick={() => setRefreshCount((count) => count + 1)}>
-            {t('Reload')}
+              {t('Reload')}
+            </Button>
+          </div>
+        ) : (
+          <div className="text-center text-sm text-muted-foreground mt-2">{t('no more notes')}</div>
+        )}
+      </div>
+    )
+
+    return (
+      <div>
+        <div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
+        {showLoadingBar && <LoadingBar />}
+        <div className="border-b h-12 pl-4 pr-1 flex items-center justify-between gap-2">
+          <div className="text-sm text-muted-foreground flex items-center gap-1.5 min-w-0">
+            <span className="font-medium text-foreground">
+              {lastXDays === 1
+                ? t('Last 24 hours')
+                : t('Last {{count}} days', { count: lastXDays })}
+            </span>
+            ·
+            <span>
+              {filteredEvents.length} {t('notes')}
+            </span>
+          </div>
+          <Button
+            variant="ghost"
+            className="h-10 px-3 shrink-0 rounded-lg text-muted-foreground hover:text-foreground"
+            disabled={showLoadingBar || !hasMore}
+            onClick={handleLoadEarlier}
+          >
+            {showLoadingBar ? <Loader className="animate-spin" /> : <History />}
+            {t('Load earlier')}
           </Button>
         </div>
-      ) : (
+        {supportTouch ? (
-        <div className="text-center text-sm text-muted-foreground mt-2">{t('no more notes')}</div>
+          <PullToRefresh
-      )}
+            onRefresh={async () => {
-    </div>
+              refresh()
-  )
+              await new Promise((resolve) => setTimeout(resolve, 1000))
-
+            }}
-  return (
+            pullingContent=""
-    <div>
+          >
-      <div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
+            {list}
-      {showLoadingBar && <LoadingBar />}
+          </PullToRefresh>
-      <div className="border-b h-12 pl-4 pr-1 flex items-center justify-between gap-2">
+        ) : (
-        <div className="text-sm text-muted-foreground flex items-center gap-1.5 min-w-0">
+          list
-          <span className="font-medium text-foreground">
+        )}
-            {lastXDays === 1 ? t('Last 24 hours') : t('Last {{count}} days', { count: lastXDays })}
+        <div className="h-40" />
-          </span>
+        {filteredNewEvents.length > 0 && (
-          ·
+          <NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />
-          <span>
+        )}
-            {filteredEvents.length} {t('notes')}
-          </span>
-        </div>
-        <Button
-          variant="ghost"
-          className="h-10 px-3 shrink-0 rounded-lg text-muted-foreground hover:text-foreground"
-          disabled={showLoadingBar || !hasMore}
-          onClick={handleLoadEarlier}
-        >
-          {showLoadingBar ? <Loader className="animate-spin" /> : <History />}
-          {t('Load earlier')}
-        </Button>
       </div>
-      {supportTouch ? (
+    )
-        <PullToRefresh
+  }
-          onRefresh={async () => {
+)
-            refresh()
-            await new Promise((resolve) => setTimeout(resolve, 1000))
-          }}
-          pullingContent=""
-        >
-          {list}
-        </PullToRefresh>
-      ) : (
-        list
-      )}
-    </div>
-  )
-})
 UserAggregationList.displayName = 'UserAggregationList'
 export default UserAggregationList