refactor: note list component

src/components/Feed/index.tsx

@@ -0,0 +1,303 @@
+import { BIG_RELAY_URLS, ExtendedKind } from '@/constants'
+import { isReplyNoteEvent } from '@/lib/event'
+import { checkAlgoRelay } from '@/lib/relay'
+import { isSafari } from '@/lib/utils'
+import { useMuteList } from '@/providers/MuteListProvider'
+import { useNostr } from '@/providers/NostrProvider'
+import { useUserTrust } from '@/providers/UserTrustProvider'
+import client from '@/services/client.service'
+import storage from '@/services/local-storage.service'
+import relayInfoService from '@/services/relay-info.service'
+import { TNoteListMode } from '@/types'
+import dayjs from 'dayjs'
+import { Event, Filter, kinds } from 'nostr-tools'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import NoteList, { TNoteListRef } from '../NoteList'
+import Tabs from '../Tabs'
+
+const LIMIT = 100
+const ALGO_LIMIT = 500
+const KINDS = [
+  kinds.ShortTextNote,
+  kinds.Repost,
+  kinds.Highlights,
+  kinds.LongFormArticle,
+  ExtendedKind.COMMENT,
+  ExtendedKind.POLL,
+  ExtendedKind.VOICE,
+  ExtendedKind.VOICE_COMMENT,
+  ExtendedKind.PICTURE
+]
+
+export default function Feed({
+  relayUrls = [],
+  filter = {},
+  author,
+  className,
+  filterMutedNotes = true,
+  needCheckAlgoRelay = false,
+  isMainFeed = false,
+  topSpace = 0,
+  skipTrustCheck = false
+}: {
+  relayUrls?: string[]
+  filter?: Filter
+  author?: string
+  className?: string
+  filterMutedNotes?: boolean
+  needCheckAlgoRelay?: boolean
+  isMainFeed?: boolean
+  topSpace?: number
+  skipTrustCheck?: boolean
+}) {
+  const { pubkey, startLogin } = useNostr()
+  const { mutePubkeys } = useMuteList()
+  const [refreshCount, setRefreshCount] = useState(0)
+  const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
+  const [events, setEvents] = useState<Event[]>([])
+  const [newEvents, setNewEvents] = useState<Event[]>([])
+  const [hasMore, setHasMore] = useState<boolean>(true)
+  const [loading, setLoading] = useState(true)
+  const [listMode, setListMode] = useState<TNoteListMode>(() =>
+    isMainFeed ? storage.getNoteListMode() : 'posts'
+  )
+  const [filterType, setFilterType] = useState<Exclude<TNoteListMode, 'postsAndReplies'>>('posts')
+  const noteListRef = useRef<TNoteListRef | null>(null)
+  const { isUserTrusted, hideUntrustedNotes } = useUserTrust()
+  const filteredNewEvents = useMemo(() => {
+    return newEvents.filter((event: Event) => {
+      return (
+        (!filterMutedNotes || !mutePubkeys.includes(event.pubkey)) &&
+        (listMode !== 'posts' || !isReplyNoteEvent(event)) &&
+        (skipTrustCheck || !hideUntrustedNotes || isUserTrusted(event.pubkey))
+      )
+    })
+  }, [newEvents, listMode, filterMutedNotes, mutePubkeys, hideUntrustedNotes])
+
+  useEffect(() => {
+    switch (listMode) {
+      case 'posts':
+      case 'postsAndReplies':
+        setFilterType('posts')
+        break
+      case 'you':
+        if (!pubkey || pubkey === author) {
+          setFilterType('posts')
+        } else {
+          setFilterType('you')
+        }
+        break
+    }
+  }, [listMode, pubkey])
+
+  useEffect(() => {
+    if (relayUrls.length === 0 && !filter.authors?.length && !author) return
+
+    async function init() {
+      setLoading(true)
+      setEvents([])
+      setNewEvents([])
+      setHasMore(true)
+
+      let areAlgoRelays = false
+      const subRequests: {
+        urls: string[]
+        filter: Omit<Filter, 'since' | 'until'> & { limit: number }
+      }[] = []
+      if (filterType === 'you' && author && pubkey && pubkey !== author) {
+        const [myRelayList, targetRelayList] = await Promise.all([
+          client.fetchRelayList(pubkey),
+          client.fetchRelayList(author)
+        ])
+        subRequests.push({
+          urls: myRelayList.write.concat(BIG_RELAY_URLS).slice(0, 5),
+          filter: {
+            kinds: KINDS,
+            authors: [pubkey],
+            '#p': [author],
+            limit: LIMIT
+          }
+        })
+        subRequests.push({
+          urls: targetRelayList.write.concat(BIG_RELAY_URLS).slice(0, 5),
+          filter: {
+            kinds: KINDS,
+            authors: [author],
+            '#p': [pubkey],
+            limit: LIMIT
+          }
+        })
+      } else {
+        if (needCheckAlgoRelay) {
+          const relayInfos = await relayInfoService.getRelayInfos(relayUrls)
+          areAlgoRelays = relayInfos.every((relayInfo) => checkAlgoRelay(relayInfo))
+        }
+        const _filter = {
+          ...filter,
+          kinds: KINDS,
+          limit: areAlgoRelays ? ALGO_LIMIT : LIMIT
+        }
+        if (relayUrls.length === 0 && (_filter.authors?.length || author)) {
+          if (!_filter.authors?.length) {
+            _filter.authors = [author!]
+          }
+
+          // If many websocket connections are initiated simultaneously, it will be
+          // very slow on Safari (for unknown reason)
+          if ((_filter.authors?.length ?? 0) > 5 && isSafari()) {
+            if (!pubkey) {
+              subRequests.push({ urls: BIG_RELAY_URLS, filter: _filter })
+            } else {
+              const relayList = await client.fetchRelayList(pubkey)
+              const urls = relayList.read.concat(BIG_RELAY_URLS).slice(0, 5)
+              subRequests.push({ urls, filter: _filter })
+            }
+          } else {
+            const relayLists = await client.fetchRelayLists(_filter.authors)
+            const group: Record<string, Set<string>> = {}
+            relayLists.forEach((relayList, index) => {
+              relayList.write.slice(0, 4).forEach((url) => {
+                if (!group[url]) {
+                  group[url] = new Set()
+                }
+                group[url].add(_filter.authors![index])
+              })
+            })
+
+            const relayCount = Object.keys(group).length
+            const coveredCount = new Map<string, number>()
+            Object.entries(group)
+              .sort(([, a], [, b]) => b.size - a.size)
+              .forEach(([url, pubkeys]) => {
+                if (
+                  relayCount > 10 &&
+                  pubkeys.size < 10 &&
+                  Array.from(pubkeys).every((pubkey) => (coveredCount.get(pubkey) ?? 0) >= 2)
+                ) {
+                  delete group[url]
+                } else {
+                  pubkeys.forEach((pubkey) => {
+                    coveredCount.set(pubkey, (coveredCount.get(pubkey) ?? 0) + 1)
+                  })
+                }
+              })
+
+            subRequests.push(
+              ...Object.entries(group).map(([url, authors]) => ({
+                urls: [url],
+                filter: { ..._filter, authors: Array.from(authors) }
+              }))
+            )
+          }
+        } else {
+          subRequests.push({ urls: relayUrls, filter: _filter })
+        }
+      }
+
+      const { closer, timelineKey } = await client.subscribeTimeline(
+        subRequests,
+        {
+          onEvents: (events, eosed) => {
+            if (events.length > 0) {
+              setEvents(events)
+            }
+            if (areAlgoRelays) {
+              setHasMore(false)
+            }
+            if (eosed) {
+              setLoading(false)
+              setHasMore(events.length > 0)
+            }
+          },
+          onNew: (event) => {
+            setNewEvents((oldEvents) =>
+              [event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
+            )
+          }
+        },
+        {
+          startLogin,
+          needSort: !areAlgoRelays
+        }
+      )
+      setTimelineKey(timelineKey)
+      return closer
+    }
+
+    const promise = init()
+    return () => {
+      promise.then((closer) => closer())
+    }
+  }, [JSON.stringify(relayUrls), filterType, refreshCount, JSON.stringify(filter)])
+
+  const loadMore = async () => {
+    if (!timelineKey) return
+    setLoading(true)
+    const newEvents = await client.loadMoreTimeline(
+      timelineKey,
+      events.length ? events[events.length - 1].created_at - 1 : dayjs().unix(),
+      LIMIT
+    )
+    setLoading(false)
+    if (newEvents.length === 0) {
+      setHasMore(false)
+      return
+    }
+    setEvents((oldEvents) => [...oldEvents, ...newEvents])
+  }
+
+  const showNewEvents = () => {
+    setEvents((oldEvents) => [...newEvents, ...oldEvents])
+    setNewEvents([])
+    setTimeout(() => {
+      noteListRef.current?.scrollToTop()
+    }, 0)
+  }
+
+  return (
+    <div className={className}>
+      <Tabs
+        value={listMode}
+        tabs={
+          pubkey && author && pubkey !== author
+            ? [
+                { value: 'posts', label: 'Notes' },
+                { value: 'postsAndReplies', label: 'Replies' },
+                { value: 'you', label: 'YouTabName' }
+              ]
+            : [
+                { value: 'posts', label: 'Notes' },
+                { value: 'postsAndReplies', label: 'Replies' }
+              ]
+        }
+        onTabChange={(listMode) => {
+          setListMode(listMode as TNoteListMode)
+          if (isMainFeed) {
+            storage.setNoteListMode(listMode as TNoteListMode)
+          }
+          setTimeout(() => {
+            noteListRef.current?.scrollToTop()
+          }, 0)
+        }}
+        threshold={Math.max(800, topSpace)}
+      />
+      <NoteList
+        ref={noteListRef}
+        events={events.filter(
+          (event: Event) =>
+            (listMode !== 'posts' || !isReplyNoteEvent(event)) &&
+            (skipTrustCheck || !hideUntrustedNotes || isUserTrusted(event.pubkey))
+        )}
+        hasMore={hasMore}
+        loading={loading}
+        loadMore={loadMore}
+        filterMutedNotes={filterMutedNotes}
+        onRefresh={() => {
+          setRefreshCount((count) => count + 1)
+        }}
+        newEvents={filteredNewEvents}
+        showNewEvents={showNewEvents}
+      />
+    </div>
+  )
+}

src/components/NormalFeed/index.tsx

@@ -0,0 +1,168 @@
+import NoteList, { TNoteListRef } from '@/components/NoteList'
+import Tabs from '@/components/Tabs'
+import { ExtendedKind } from '@/constants'
+import { isReplyNoteEvent } from '@/lib/event'
+import { useNostr } from '@/providers/NostrProvider'
+import { useUserTrust } from '@/providers/UserTrustProvider'
+import client from '@/services/client.service'
+import storage from '@/services/local-storage.service'
+import { TNormalFeedSubRequest, TNoteListMode } from '@/types'
+import dayjs from 'dayjs'
+import { Event, kinds } from 'nostr-tools'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+const LIMIT = 100
+const ALGO_LIMIT = 500
+const KINDS = [
+  kinds.ShortTextNote,
+  kinds.Repost,
+  kinds.Highlights,
+  kinds.LongFormArticle,
+  ExtendedKind.COMMENT,
+  ExtendedKind.POLL,
+  ExtendedKind.VOICE,
+  ExtendedKind.VOICE_COMMENT,
+  ExtendedKind.PICTURE
+]
+
+export default function NormalFeed({
+  subRequests,
+  areAlgoRelays = false
+}: {
+  subRequests: TNormalFeedSubRequest[]
+  areAlgoRelays?: boolean
+}) {
+  const { startLogin } = useNostr()
+  const { isUserTrusted, hideUntrustedNotes } = useUserTrust()
+  const [listMode, setListMode] = useState<TNoteListMode>(() => storage.getNoteListMode())
+  const [events, setEvents] = useState<Event[]>([])
+  const [newEvents, setNewEvents] = useState<Event[]>([])
+  const [hasMore, setHasMore] = useState<boolean>(true)
+  const [loading, setLoading] = useState(true)
+  const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
+  const [refreshCount, setRefreshCount] = useState(0)
+  const noteListRef = useRef<TNoteListRef>(null)
+  const filteredNewEvents = useMemo(() => {
+    return newEvents.filter((event: Event) => {
+      return (
+        (listMode !== 'posts' || !isReplyNoteEvent(event)) &&
+        (!hideUntrustedNotes || isUserTrusted(event.pubkey))
+      )
+    })
+  }, [newEvents, listMode, hideUntrustedNotes])
+
+  useEffect(() => {
+    if (!subRequests.length) return
+
+    async function init() {
+      setLoading(true)
+      setEvents([])
+      setNewEvents([])
+      setHasMore(true)
+
+      const { closer, timelineKey } = await client.subscribeTimeline(
+        subRequests.map(({ urls, filter }) => ({
+          urls,
+          filter: {
+            ...filter,
+            kinds: KINDS,
+            limit: areAlgoRelays ? ALGO_LIMIT : LIMIT
+          }
+        })),
+        {
+          onEvents: (events, eosed) => {
+            if (events.length > 0) {
+              setEvents(events)
+            }
+            if (areAlgoRelays) {
+              setHasMore(false)
+            }
+            if (eosed) {
+              setLoading(false)
+              setHasMore(events.length > 0)
+            }
+          },
+          onNew: (event) => {
+            setNewEvents((oldEvents) =>
+              [event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
+            )
+          }
+        },
+        {
+          startLogin,
+          needSort: !areAlgoRelays
+        }
+      )
+      setTimelineKey(timelineKey)
+      return closer
+    }
+
+    const promise = init()
+    return () => {
+      promise.then((closer) => closer())
+    }
+  }, [JSON.stringify(subRequests), refreshCount])
+
+  const loadMore = async () => {
+    if (!timelineKey || areAlgoRelays) return
+    setLoading(true)
+    const newEvents = await client.loadMoreTimeline(
+      timelineKey,
+      events.length ? events[events.length - 1].created_at - 1 : dayjs().unix(),
+      LIMIT
+    )
+    setLoading(false)
+    if (newEvents.length === 0) {
+      setHasMore(false)
+      return
+    }
+    setEvents((oldEvents) => [...oldEvents, ...newEvents])
+  }
+
+  const showNewEvents = () => {
+    setEvents((oldEvents) => [...newEvents, ...oldEvents])
+    setNewEvents([])
+    setTimeout(() => {
+      noteListRef.current?.scrollToTop()
+    }, 0)
+  }
+
+  const handleListModeChange = (mode: TNoteListMode) => {
+    setListMode(mode)
+    storage.setNoteListMode(mode)
+    setTimeout(() => {
+      noteListRef.current?.scrollToTop()
+    }, 0)
+  }
+
+  return (
+    <>
+      <Tabs
+        value={listMode}
+        tabs={[
+          { value: 'posts', label: 'Notes' },
+          { value: 'postsAndReplies', label: 'Replies' }
+        ]}
+        onTabChange={(listMode) => {
+          handleListModeChange(listMode as TNoteListMode)
+        }}
+      />
+      <NoteList
+        ref={noteListRef}
+        events={events.filter(
+          (event: Event) =>
+            (listMode !== 'posts' || !isReplyNoteEvent(event)) &&
+            (!hideUntrustedNotes || isUserTrusted(event.pubkey))
+        )}
+        hasMore={hasMore}
+        loading={loading}
+        loadMore={loadMore}
+        onRefresh={() => {
+          setRefreshCount((count) => count + 1)
+        }}
+        newEvents={filteredNewEvents}
+        showNewEvents={showNewEvents}
+      />
+    </>
+  )
+}

src/components/NoteList/index.tsx

@@ -1,246 +1,53 @@
 import NewNotesButton from '@/components/NewNotesButton'
 import { Button } from '@/components/ui/button'
-import { BIG_RELAY_URLS, ExtendedKind } from '@/constants'
+import { getReplaceableCoordinateFromEvent, isReplaceableEvent } from '@/lib/event'
-import {
+import { Event } from 'nostr-tools'
-  getReplaceableCoordinateFromEvent,
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
-  isReplaceableEvent,
-  isReplyNoteEvent
-} from '@/lib/event'
-import { checkAlgoRelay } from '@/lib/relay'
-import { isSafari } from '@/lib/utils'
-import { useMuteList } from '@/providers/MuteListProvider'
-import { useNostr } from '@/providers/NostrProvider'
-import { useUserTrust } from '@/providers/UserTrustProvider'
-import client from '@/services/client.service'
-import storage from '@/services/local-storage.service'
-import relayInfoService from '@/services/relay-info.service'
-import { TNoteListMode } from '@/types'
-import dayjs from 'dayjs'
-import { Event, Filter, kinds } from 'nostr-tools'
-import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PullToRefresh from 'react-simple-pull-to-refresh'
 import NoteCard, { NoteCardLoadingSkeleton } from '../NoteCard'
-import Tabs from '../Tabs'
 
-const LIMIT = 100
-const ALGO_LIMIT = 500
 const SHOW_COUNT = 10
-const KINDS = [
-  kinds.ShortTextNote,
-  kinds.Repost,
-  kinds.Highlights,
-  kinds.LongFormArticle,
-  ExtendedKind.COMMENT,
-  ExtendedKind.POLL,
-  ExtendedKind.VOICE,
-  ExtendedKind.VOICE_COMMENT,
-  ExtendedKind.PICTURE
-]
 
-export default function NoteList({
+const NoteList = forwardRef(
-  relayUrls = [],
+  (
-  filter = {},
+    {
-  author,
+      events,
-  className,
+      hasMore,
-  filterMutedNotes = true,
+      loading,
-  needCheckAlgoRelay = false,
+      loadMore,
-  isMainFeed = false,
+      newEvents = [],
-  topSpace = 0,
+      showNewEvents,
-  skipTrustCheck = false
+      onRefresh,
+      filterMutedNotes
     }: {
-  relayUrls?: string[]
+      events: Event[]
-  filter?: Filter
+      hasMore: boolean
-  author?: string
+      loading: boolean
-  className?: string
+      loadMore?: () => void
+      newEvents?: Event[]
+      showNewEvents?: () => void
+      onRefresh?: () => void
       filterMutedNotes?: boolean
-  needCheckAlgoRelay?: boolean
+    },
-  isMainFeed?: boolean
+    ref
-  topSpace?: number
+  ) => {
-  skipTrustCheck?: boolean
-}) {
     const { t } = useTranslation()
-  const { pubkey, startLogin } = useNostr()
-  const { mutePubkeys } = useMuteList()
-  const [refreshCount, setRefreshCount] = useState(0)
-  const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
-  const [events, setEvents] = useState<Event[]>([])
-  const [newEvents, setNewEvents] = useState<Event[]>([])
     const [showCount, setShowCount] = useState(SHOW_COUNT)
-  const [hasMore, setHasMore] = useState<boolean>(true)
-  const [loading, setLoading] = useState(true)
-  const [listMode, setListMode] = useState<TNoteListMode>(() =>
-    isMainFeed ? storage.getNoteListMode() : 'posts'
-  )
-  const [filterType, setFilterType] = useState<Exclude<TNoteListMode, 'postsAndReplies'>>('posts')
     const bottomRef = useRef<HTMLDivElement | null>(null)
     const topRef = useRef<HTMLDivElement | null>(null)
-  const { isUserTrusted, hideUntrustedNotes } = useUserTrust()
-  const filteredNewEvents = useMemo(() => {
-    return newEvents.filter((event: Event) => {
-      return (
-        (!filterMutedNotes || !mutePubkeys.includes(event.pubkey)) &&
-        (listMode !== 'posts' || !isReplyNoteEvent(event)) &&
-        (skipTrustCheck || !hideUntrustedNotes || isUserTrusted(event.pubkey))
-      )
-    })
-  }, [newEvents, listMode, filterMutedNotes, mutePubkeys, hideUntrustedNotes])
-
-  useEffect(() => {
-    switch (listMode) {
-      case 'posts':
-      case 'postsAndReplies':
-        setFilterType('posts')
-        break
-      case 'you':
-        if (!pubkey || pubkey === author) {
-          setFilterType('posts')
-        } else {
-          setFilterType('you')
-        }
-        break
-    }
-  }, [listMode, pubkey])
-
-  useEffect(() => {
-    if (relayUrls.length === 0 && !filter.authors?.length && !author) return
-
-    async function init() {
-      setLoading(true)
-      setEvents([])
-      setNewEvents([])
-      setHasMore(true)
-
-      let areAlgoRelays = false
-      const subRequests: {
-        urls: string[]
-        filter: Omit<Filter, 'since' | 'until'> & { limit: number }
-      }[] = []
-      if (filterType === 'you' && author && pubkey && pubkey !== author) {
-        const [myRelayList, targetRelayList] = await Promise.all([
-          client.fetchRelayList(pubkey),
-          client.fetchRelayList(author)
-        ])
-        subRequests.push({
-          urls: myRelayList.write.concat(BIG_RELAY_URLS).slice(0, 5),
-          filter: {
-            kinds: KINDS,
-            authors: [pubkey],
-            '#p': [author],
-            limit: LIMIT
-          }
-        })
-        subRequests.push({
-          urls: targetRelayList.write.concat(BIG_RELAY_URLS).slice(0, 5),
-          filter: {
-            kinds: KINDS,
-            authors: [author],
-            '#p': [pubkey],
-            limit: LIMIT
-          }
-        })
-      } else {
-        if (needCheckAlgoRelay) {
-          const relayInfos = await relayInfoService.getRelayInfos(relayUrls)
-          areAlgoRelays = relayInfos.every((relayInfo) => checkAlgoRelay(relayInfo))
-        }
-        const _filter = {
-          ...filter,
-          kinds: KINDS,
-          limit: areAlgoRelays ? ALGO_LIMIT : LIMIT
-        }
-        if (relayUrls.length === 0 && (_filter.authors?.length || author)) {
-          if (!_filter.authors?.length) {
-            _filter.authors = [author!]
-          }
-
-          // If many websocket connections are initiated simultaneously, it will be
-          // very slow on Safari (for unknown reason)
-          if ((_filter.authors?.length ?? 0) > 5 && isSafari()) {
-            if (!pubkey) {
-              subRequests.push({ urls: BIG_RELAY_URLS, filter: _filter })
-            } else {
-              const relayList = await client.fetchRelayList(pubkey)
-              const urls = relayList.read.concat(BIG_RELAY_URLS).slice(0, 5)
-              subRequests.push({ urls, filter: _filter })
-            }
-          } else {
-            const relayLists = await client.fetchRelayLists(_filter.authors)
-            const group: Record<string, Set<string>> = {}
-            relayLists.forEach((relayList, index) => {
-              relayList.write.slice(0, 4).forEach((url) => {
-                if (!group[url]) {
-                  group[url] = new Set()
-                }
-                group[url].add(_filter.authors![index])
-              })
-            })
-
-            const relayCount = Object.keys(group).length
-            const coveredCount = new Map<string, number>()
-            Object.entries(group)
-              .sort(([, a], [, b]) => b.size - a.size)
-              .forEach(([url, pubkeys]) => {
-                if (
-                  relayCount > 10 &&
-                  pubkeys.size < 10 &&
-                  Array.from(pubkeys).every((pubkey) => (coveredCount.get(pubkey) ?? 0) >= 2)
-                ) {
-                  delete group[url]
-                } else {
-                  pubkeys.forEach((pubkey) => {
-                    coveredCount.set(pubkey, (coveredCount.get(pubkey) ?? 0) + 1)
-                  })
-                }
-              })
-
-            subRequests.push(
-              ...Object.entries(group).map(([url, authors]) => ({
-                urls: [url],
-                filter: { ..._filter, authors: Array.from(authors) }
-              }))
-            )
-          }
-        } else {
-          subRequests.push({ urls: relayUrls, filter: _filter })
-        }
-      }
 
-      const { closer, timelineKey } = await client.subscribeTimeline(
+    useImperativeHandle(
-        subRequests,
+      ref,
-        {
+      () => ({
-          onEvents: (events, eosed) => {
+        scrollToTop: () => {
-            if (events.length > 0) {
+          topRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-              setEvents(events)
-            }
-            if (areAlgoRelays) {
-              setHasMore(false)
-            }
-            if (eosed) {
-              setLoading(false)
-              setHasMore(events.length > 0)
-            }
-          },
-          onNew: (event) => {
-            setNewEvents((oldEvents) =>
-              [event, ...oldEvents].sort((a, b) => b.created_at - a.created_at)
-            )
-          }
-        },
-        {
-          startLogin,
-          needSort: !areAlgoRelays
         }
+      }),
+      []
     )
-      setTimelineKey(timelineKey)
-      return closer
-    }
 
-    const promise = init()
+    const idSet = new Set<string>()
-    return () => {
-      promise.then((closer) => closer())
-    }
-  }, [JSON.stringify(relayUrls), filterType, refreshCount, JSON.stringify(filter)])
 
     useEffect(() => {
       const options = {
@@ -249,33 +56,22 @@ export default function NoteList({
         threshold: 0.1
       }
 
-    const loadMore = async () => {
+      const _loadMore = async () => {
         if (showCount < events.length) {
           setShowCount((prev) => prev + SHOW_COUNT)
           // preload more
-        if (events.length - showCount > LIMIT / 2) {
+          if (events.length - showCount > 2 * SHOW_COUNT) {
             return
           }
         }
 
-      if (!timelineKey || loading || !hasMore) return
+        if (loading || !hasMore) return
-      setLoading(true)
+        loadMore?.()
-      const newEvents = await client.loadMoreTimeline(
-        timelineKey,
-        events.length ? events[events.length - 1].created_at - 1 : dayjs().unix(),
-        LIMIT
-      )
-      setLoading(false)
-      if (newEvents.length === 0) {
-        setHasMore(false)
-        return
-      }
-      setEvents((oldEvents) => [...oldEvents, ...newEvents])
       }
 
       const observerInstance = new IntersectionObserver((entries) => {
         if (entries[0].isIntersecting && hasMore) {
-        loadMore()
+          _loadMore()
         }
       }, options)
 
@@ -290,79 +86,39 @@ export default function NoteList({
           observerInstance.unobserve(currentBottomRef)
         }
       }
-  }, [timelineKey, loading, hasMore, events, filterType, showCount])
+    }, [loading, hasMore, events, loadMore])
-
-  const showNewEvents = () => {
-    setEvents((oldEvents) => [...newEvents, ...oldEvents])
-    setNewEvents([])
-    setTimeout(() => {
-      topRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-    }, 0)
-  }
-
-  const idSet = new Set<string>()
 
     return (
-    <div className={className}>
+      <div>
-      <Tabs
+        {newEvents.length > 0 && <NewNotesButton newEvents={newEvents} onClick={showNewEvents} />}
-        value={listMode}
-        tabs={
-          pubkey && author && pubkey !== author
-            ? [
-                { value: 'posts', label: 'Notes' },
-                { value: 'postsAndReplies', label: 'Replies' },
-                { value: 'you', label: 'YouTabName' }
-              ]
-            : [
-                { value: 'posts', label: 'Notes' },
-                { value: 'postsAndReplies', label: 'Replies' }
-              ]
-        }
-        onTabChange={(listMode) => {
-          setListMode(listMode as TNoteListMode)
-          setShowCount(SHOW_COUNT)
-          if (isMainFeed) {
-            storage.setNoteListMode(listMode as TNoteListMode)
-          }
-          setTimeout(() => {
-            topRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-          }, 0)
-        }}
-        threshold={Math.max(800, topSpace)}
-      />
-      {filteredNewEvents.length > 0 && (
-        <NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />
-      )}
         <div ref={topRef} className="scroll-mt-24" />
         <PullToRefresh
           onRefresh={async () => {
-          setRefreshCount((count) => count + 1)
+            onRefresh?.()
             await new Promise((resolve) => setTimeout(resolve, 1000))
           }}
           pullingContent=""
         >
           <div className="min-h-screen">
-          {events
+            {events.slice(0, showCount).map((event) => {
-            .slice(0, showCount)
-            .filter((event: Event) => {
               const id = isReplaceableEvent(event.kind)
                 ? getReplaceableCoordinateFromEvent(event)
                 : event.id
-              if (idSet.has(id)) return false
+
+              if (idSet.has(id)) {
+                return null
+              }
+
               idSet.add(id)
               return (
-                (listMode !== 'posts' || !isReplyNoteEvent(event)) &&
-                (skipTrustCheck || !hideUntrustedNotes || isUserTrusted(event.pubkey))
-              )
-            })
-            .map((event) => (
                 <NoteCard
                   key={event.id}
                   className="w-full"
                   event={event}
                   filterMutedNotes={filterMutedNotes}
                 />
-            ))}
+              )
+            })}
             {hasMore || loading ? (
               <div ref={bottomRef}>
                 <NoteCardLoadingSkeleton />
@@ -373,7 +129,7 @@ export default function NoteList({
               </div>
             ) : (
               <div className="flex justify-center w-full mt-2">
-              <Button size="lg" onClick={() => setRefreshCount((pre) => pre + 1)}>
+                <Button size="lg" onClick={onRefresh}>
                   {t('reload notes')}
                 </Button>
               </div>
@@ -384,3 +140,10 @@ export default function NoteList({
       </div>
     )
   }
+)
+NoteList.displayName = 'NoteList'
+export default NoteList
+
+export type TNoteListRef = {
+  scrollToTop: () => void
+}

src/components/Tabs/index.tsx

@@ -26,7 +26,7 @@ export default function Tabs({
   return (
     <div
       className={cn(
-        'sticky flex top-12 bg-background z-30 w-full transition-transform',
+        'sticky flex top-12 py-1 bg-background z-30 w-full transition-transform',
         deepBrowsing && lastScrollTop > threshold ? '-translate-y-[calc(100%+12rem)]' : ''
       )}
     >

src/pages/primary/NoteListPage/FollowingFeed.tsx

@@ -0,0 +1,28 @@
+import NormalFeed from '@/components/NormalFeed'
+import { useFeed } from '@/providers/FeedProvider'
+import { useNostr } from '@/providers/NostrProvider'
+import client from '@/services/client.service'
+import { TNormalFeedSubRequest } from '@/types'
+import { useEffect, useState } from 'react'
+
+export default function FollowingFeed() {
+  const { pubkey } = useNostr()
+  const { feedInfo } = useFeed()
+  const [subRequests, setSubRequests] = useState<TNormalFeedSubRequest[]>([])
+
+  useEffect(() => {
+    async function init() {
+      if (feedInfo.feedType !== 'following' || !pubkey) {
+        setSubRequests([])
+        return
+      }
+
+      const followings = await client.fetchFollowings(pubkey)
+      setSubRequests(await client.generateSubRequestsForPubkeys(followings, pubkey))
+    }
+
+    init()
+  }, [feedInfo.feedType, pubkey])
+
+  return <NormalFeed subRequests={subRequests} />
+}

src/pages/primary/NoteListPage/RelaysFeed.tsx

@@ -0,0 +1,36 @@
+import NormalFeed from '@/components/NormalFeed'
+import { checkAlgoRelay } from '@/lib/relay'
+import { useFeed } from '@/providers/FeedProvider'
+import relayInfoService from '@/services/relay-info.service'
+import { useEffect, useState } from 'react'
+
+export default function RelaysFeed() {
+  const { feedInfo, relayUrls } = useFeed()
+  const [isReady, setIsReady] = useState(false)
+  const [areAlgoRelays, setAreAlgoRelays] = useState(false)
+
+  useEffect(() => {
+    const init = async () => {
+      const relayInfos = await relayInfoService.getRelayInfos(relayUrls)
+      setAreAlgoRelays(relayInfos.every((relayInfo) => checkAlgoRelay(relayInfo)))
+      setIsReady(true)
+    }
+    init()
+  }, [relayUrls])
+
+  if (!isReady) {
+    return null
+  }
+
+  if (
+    feedInfo.feedType !== 'relay' &&
+    feedInfo.feedType !== 'relays' &&
+    feedInfo.feedType !== 'temporary'
+  ) {
+    return null
+  }
+
+  return (
+    <NormalFeed subRequests={[{ urls: relayUrls, filter: {} }]} areAlgoRelays={areAlgoRelays} />
+  )
+}

src/pages/primary/NoteListPage/index.tsx

@@ -1,5 +1,4 @@
 import BookmarkList from '@/components/BookmarkList'
-import NoteList from '@/components/NoteList'
 import PostEditor from '@/components/PostEditor'
 import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
 import { Button } from '@/components/ui/button'
@@ -12,13 +11,15 @@ import { PencilLine } from 'lucide-react'
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import FeedButton from './FeedButton'
+import FollowingFeed from './FollowingFeed'
+import RelaysFeed from './RelaysFeed'
 import SearchButton from './SearchButton'
 
 const NoteListPage = forwardRef((_, ref) => {
   const { t } = useTranslation()
   const layoutRef = useRef<TPageRef>(null)
   const { pubkey, checkLogin } = useNostr()
-  const { feedInfo, relayUrls, isReady, filter } = useFeed()
+  const { feedInfo, relayUrls, isReady } = useFeed()
   useImperativeHandle(ref, () => layoutRef.current)
 
   useEffect(() => {
@@ -27,8 +28,10 @@ const NoteListPage = forwardRef((_, ref) => {
     }
   }, [JSON.stringify(relayUrls), feedInfo])
 
-  let content = <div className="text-center text-sm text-muted-foreground">{t('loading...')}</div>
+  let content: React.ReactNode = null
-  if (feedInfo.feedType === 'following' && !pubkey) {
+  if (!isReady) {
+    content = <div className="text-center text-sm text-muted-foreground">{t('loading...')}</div>
+  } else if (feedInfo.feedType === 'following' && !pubkey) {
     content = (
       <div className="flex justify-center w-full">
         <Button size="lg" onClick={() => checkLogin()}>
@@ -48,16 +51,10 @@ const NoteListPage = forwardRef((_, ref) => {
     } else {
       content = <BookmarkList />
     }
-  } else if (isReady) {
+  } else if (feedInfo.feedType === 'following') {
-    content = (
+    content = <FollowingFeed />
-      <NoteList
+  } else {
-        relayUrls={relayUrls}
+    content = <RelaysFeed />
-        filter={filter}
-        needCheckAlgoRelay={feedInfo.feedType !== 'following'}
-        isMainFeed
-        skipTrustCheck={feedInfo.feedType === 'following'}
-      />
-    )
   }
 
   return (

src/pages/secondary/NoteListPage/index.tsx

@@ -1,5 +1,5 @@
 import { Favicon } from '@/components/Favicon'
-import NoteList from '@/components/NoteList'
+import NormalFeed from '@/components/NormalFeed'
 import { Button } from '@/components/ui/button'
 import { BIG_RELAY_URLS, SEARCHABLE_RELAY_URLS } from '@/constants'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
@@ -7,63 +7,67 @@ import { toProfileList } from '@/lib/link'
 import { fetchPubkeysFromDomain, getWellKnownNip05Url } from '@/lib/nip05'
 import { useSecondaryPage } from '@/PageManager'
 import { useNostr } from '@/providers/NostrProvider'
+import client from '@/services/client.service'
+import { TNormalFeedSubRequest } from '@/types'
 import { UserRound } from 'lucide-react'
-import { Filter } from 'nostr-tools'
 import React, { forwardRef, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
   const { t } = useTranslation()
   const { push } = useSecondaryPage()
-  const { relayList } = useNostr()
+  const { relayList, pubkey } = useNostr()
   const [title, setTitle] = useState<React.ReactNode>(null)
   const [controls, setControls] = useState<React.ReactNode>(null)
   const [data, setData] = useState<
     | {
         type: 'hashtag' | 'search' | 'externalContent'
-        filter: Filter
-        urls: string[]
       }
     | {
         type: 'domain'
-        filter: Filter
         domain: string
-        urls?: string[]
       }
     | null
   >(null)
+  const [subRequests, setSubRequests] = useState<TNormalFeedSubRequest[]>([])
 
   useEffect(() => {
     const init = async () => {
       const searchParams = new URLSearchParams(window.location.search)
       const hashtag = searchParams.get('t')
       if (hashtag) {
-        setData({
+        setData({ type: 'hashtag' })
-          type: 'hashtag',
+        setTitle(`# ${hashtag}`)
+        setSubRequests([
+          {
             filter: { '#t': [hashtag] },
             urls: BIG_RELAY_URLS
-        })
+          }
-        setTitle(`# ${hashtag}`)
+        ])
         return
       }
       const search = searchParams.get('s')
       if (search) {
-        setData({
+        setData({ type: 'search' })
-          type: 'search',
+        setTitle(`${t('Search')}: ${search}`)
+        setSubRequests([
+          {
             filter: { search },
             urls: SEARCHABLE_RELAY_URLS
-        })
+          }
-        setTitle(`${t('Search')}: ${search}`)
+        ])
         return
       }
       const externalContentId = searchParams.get('i')
       if (externalContentId) {
-        setData({
+        setData({ type: 'externalContent' })
-          type: 'externalContent',
+        setTitle(externalContentId)
+        setSubRequests([
+          {
             filter: { '#I': [externalContentId] },
             urls: BIG_RELAY_URLS.concat(relayList?.write || [])
-        })
+          }
-        setTitle(externalContentId)
+        ])
         return
       }
       const domain = searchParams.get('d')
@@ -75,13 +79,12 @@ const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
           </div>
         )
         const pubkeys = await fetchPubkeysFromDomain(domain)
-        console.log(domain, pubkeys)
         setData({
           type: 'domain',
-          domain,
+          domain
-          filter: { authors: pubkeys }
         })
         if (pubkeys.length) {
+          setSubRequests(await client.generateSubRequestsForPubkeys(pubkeys, pubkey))
           setControls(
             <Button
               variant="ghost"
@@ -99,7 +102,7 @@ const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
   }, [])
 
   let content: React.ReactNode = null
-  if (data?.type === 'domain' && data.filter?.authors?.length === 0) {
+  if (data?.type === 'domain' && setSubRequests.length === 0) {
     content = (
       <div className="text-center w-full py-10">
         <span className="text-muted-foreground">
@@ -108,7 +111,7 @@ const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
       </div>
     )
   } else if (data) {
-    content = <NoteList filter={data.filter} relayUrls={data.urls} />
+    content = <NormalFeed subRequests={subRequests} />
   }
 
   return (

src/pages/secondary/ProfilePage/index.tsx

@@ -1,7 +1,7 @@
 import Collapsible from '@/components/Collapsible'
 import FollowButton from '@/components/FollowButton'
 import Nip05 from '@/components/Nip05'
-import NoteList from '@/components/NoteList'
+import Feed from '@/components/Feed'
 import ProfileAbout from '@/components/ProfileAbout'
 import ProfileBanner from '@/components/ProfileBanner'
 import ProfileOptions from '@/components/ProfileOptions'
@@ -193,7 +193,7 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
           </div>
         </div>
       </div>
-      <NoteList
+      <Feed
         author={pubkey}
         className="mt-2"
         filterMutedNotes={false}

src/pages/secondary/RelayPage/index.tsx

@@ -1,4 +1,4 @@
-import NoteList from '@/components/NoteList'
+import NormalFeed from '@/components/NormalFeed'
 import RelayInfo from '@/components/RelayInfo'
 import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
 import SearchInput from '@/components/SearchInput'
@@ -52,10 +52,10 @@ const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number },
           />
         </div>
       )}
-      <NoteList
+      <NormalFeed
-        relayUrls={[normalizedUrl]}
+        subRequests={[
-        needCheckAlgoRelay
+          { urls: [normalizedUrl], filter: debouncedInput ? { search: debouncedInput } : {} }
-        filter={debouncedInput ? { search: debouncedInput } : {}}
+        ]}
       />
     </SecondaryPageLayout>
   )

src/providers/FeedProvider.tsx

@@ -7,7 +7,7 @@ import indexedDb from '@/services/indexed-db.service'
 import storage from '@/services/local-storage.service'
 import relayInfoService from '@/services/relay-info.service'
 import { TFeedInfo, TFeedType } from '@/types'
-import { Filter, kinds } from 'nostr-tools'
+import { kinds } from 'nostr-tools'
 import { createContext, useContext, useEffect, useRef, useState } from 'react'
 import { useFavoriteRelays } from './FavoriteRelaysProvider'
 import { useNostr } from './NostrProvider'
@@ -16,7 +16,6 @@ type TFeedContext = {
   feedInfo: TFeedInfo
   relayUrls: string[]
   temporaryRelayUrls: string[]
-  filter: Filter
   isReady: boolean
   switchFeed: (
     feedType: TFeedType,
@@ -40,7 +39,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
   const { relaySets, favoriteRelays } = useFavoriteRelays()
   const [relayUrls, setRelayUrls] = useState<string[]>([])
   const [temporaryRelayUrls, setTemporaryRelayUrls] = useState<string[]>([])
-  const [filter, setFilter] = useState<Filter>({})
   const [isReady, setIsReady] = useState(false)
   const [feedInfo, setFeedInfo] = useState<TFeedInfo>({
     feedType: 'relay',
@@ -125,7 +123,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
       setFeedInfo(newFeedInfo)
       feedInfoRef.current = newFeedInfo
       setRelayUrls([normalizedUrl])
-      setFilter({})
       storage.setFeedInfo(newFeedInfo, pubkey)
       setIsReady(true)
 
@@ -158,7 +155,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
         setFeedInfo(newFeedInfo)
         feedInfoRef.current = newFeedInfo
         setRelayUrls(relaySet.relayUrls)
-        setFilter({})
         storage.setFeedInfo(newFeedInfo, pubkey)
         setIsReady(true)
 
@@ -180,11 +176,7 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
       feedInfoRef.current = newFeedInfo
       storage.setFeedInfo(newFeedInfo, pubkey)
 
-      const followings = await client.fetchFollowings(options.pubkey)
       setRelayUrls([])
-      setFilter({
-        authors: followings.includes(options.pubkey) ? followings : [...followings, options.pubkey]
-      })
       setIsReady(true)
       return
     }
@@ -200,7 +192,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
       storage.setFeedInfo(newFeedInfo, pubkey)
 
       setRelayUrls([])
-      setFilter({})
       setIsReady(true)
       return
     }
@@ -216,7 +207,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
       feedInfoRef.current = newFeedInfo
       setTemporaryRelayUrls(urls)
       setRelayUrls(urls)
-      setFilter({})
       setIsReady(true)
 
       const relayInfos = await relayInfoService.getRelayInfos(urls)
@@ -234,7 +224,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
         feedInfo,
         relayUrls,
         temporaryRelayUrls,
-        filter,
         isReady,
         switchFeed
       }}

src/services/client.service.ts

@@ -27,6 +27,7 @@ import {
 } from 'nostr-tools'
 import { AbstractRelay } from 'nostr-tools/abstract-relay'
 import indexedDb from './indexed-db.service'
+import { isSafari } from '@/lib/utils'
 
 type TTimelineRef = [string, number]
 
@@ -1180,6 +1181,55 @@ class ClientService extends EventTarget {
   async updateBlossomServerListEventCache(evt: NEvent) {
     await this.updateReplaceableEventCache(evt)
   }
+
+  // ================= Utils =================
+
+  async generateSubRequestsForPubkeys(pubkeys: string[], myPubkey?: string | null) {
+    // If many websocket connections are initiated simultaneously, it will be
+    // very slow on Safari (for unknown reason)
+    if (isSafari()) {
+      let urls = BIG_RELAY_URLS
+      if (myPubkey) {
+        const relayList = await this.fetchRelayList(myPubkey)
+        urls = relayList.read.concat(BIG_RELAY_URLS).slice(0, 5)
+      }
+      return [{ urls, filter: { authors: pubkeys } }]
+    }
+
+    const relayLists = await this.fetchRelayLists(pubkeys)
+    const group: Record<string, Set<string>> = {}
+    relayLists.forEach((relayList, index) => {
+      relayList.write.slice(0, 4).forEach((url) => {
+        if (!group[url]) {
+          group[url] = new Set()
+        }
+        group[url].add(pubkeys[index])
+      })
+    })
+
+    const relayCount = Object.keys(group).length
+    const coveredCount = new Map<string, number>()
+    Object.entries(group)
+      .sort(([, a], [, b]) => b.size - a.size)
+      .forEach(([url, pubkeys]) => {
+        if (
+          relayCount > 10 &&
+          pubkeys.size < 10 &&
+          Array.from(pubkeys).every((pubkey) => (coveredCount.get(pubkey) ?? 0) >= 2)
+        ) {
+          delete group[url]
+        } else {
+          pubkeys.forEach((pubkey) => {
+            coveredCount.set(pubkey, (coveredCount.get(pubkey) ?? 0) + 1)
+          })
+        }
+      })
+
+    return Object.entries(group).map(([url, authors]) => ({
+      urls: [url],
+      filter: { authors: Array.from(authors) }
+    }))
+  }
 }
 
 const instance = ClientService.getInstance()

src/types/index.d.ts

@@ -1,6 +1,16 @@
-import { Event, VerifiedEvent } from 'nostr-tools'
+import { Event, VerifiedEvent, Filter } from 'nostr-tools'
 import { POLL_TYPE } from './constants'
 
+export type TSubRequest = {
+  urls: string[]
+  filter: Omit<Filter, 'since' | 'until'> & { limit: number }
+}
+
+export type TNormalFeedSubRequest = {
+  urls: string[]
+  filter: Omit<Filter, 'since' | 'until' | 'kinds'>
+}
+
 export type TProfile = {
   username: string
   pubkey: string