feat: conversations (#277)

src/components/Nip22ReplyNoteList/index.tsx

@@ -68,12 +68,16 @@ export default function Nip22ReplyNoteList({
           relayUrls.unshift(...seenOn)
         }
         const { closer, timelineKey } = await client.subscribeTimeline(
-          relayUrls.slice(0, 4),
+          [
-          {
+            {
-            '#E': [event.id],
+              urls: relayUrls.slice(0, 4),
-            kinds: [ExtendedKind.COMMENT],
+              filter: {
-            limit: LIMIT
+                '#E': [event.id],
-          },
+                kinds: [ExtendedKind.COMMENT],
+                limit: LIMIT
+              }
+            }
+          ],
           {
             onEvents: (evts, eosed) => {
               if (evts.length > 0) {

src/components/NoteCard/index.tsx

@@ -1,5 +1,7 @@
+import { Skeleton } from '@/components/ui/skeleton'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { Event, kinds } from 'nostr-tools'
+import { useTranslation } from 'react-i18next'
 import GenericNoteCard from './GenericNoteCard'
 import RepostNoteCard from './RepostNoteCard'
 
@@ -24,3 +26,35 @@ export default function NoteCard({
   }
   return <GenericNoteCard event={event} className={className} />
 }
+
+export function NoteCardLoadingSkeleton({ isPictures }: { isPictures: boolean }) {
+  const { t } = useTranslation()
+
+  if (isPictures) {
+    return <div className="text-center text-sm text-muted-foreground">{t('loading...')}</div>
+  }
+
+  return (
+    <div className="px-4 py-3">
+      <div className="flex items-center space-x-2">
+        <Skeleton className="w-10 h-10 rounded-full" />
+        <div className={`flex-1 w-0`}>
+          <div className="py-1">
+            <Skeleton className="h-4 w-16" />
+          </div>
+          <div className="py-0.5">
+            <Skeleton className="h-3 w-12" />
+          </div>
+        </div>
+      </div>
+      <div className="pt-2">
+        <div className="my-1">
+          <Skeleton className="w-full h-4 my-1 mt-2" />
+        </div>
+        <div className="my-1">
+          <Skeleton className="w-2/3 h-4 my-1" />
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/NoteList/index.tsx

@@ -1,11 +1,9 @@
+import NewNotesButton from '@/components/NewNotesButton'
 import { Button } from '@/components/ui/button'
-import { Skeleton } from '@/components/ui/skeleton'
+import { BIG_RELAY_URLS, ExtendedKind } from '@/constants'
-import { ExtendedKind } from '@/constants'
 import { isReplyNoteEvent } from '@/lib/event'
 import { checkAlgoRelay } from '@/lib/relay'
-import { cn } from '@/lib/utils'
+import { isSafari } from '@/lib/utils'
-import NewNotesButton from '@/components/NewNotesButton'
-import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
@@ -15,11 +13,12 @@ import relayInfoService from '@/services/relay-info.service'
 import { TNoteListMode } from '@/types'
 import dayjs from 'dayjs'
 import { Event, Filter, kinds } from 'nostr-tools'
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PullToRefresh from 'react-simple-pull-to-refresh'
-import NoteCard from '../NoteCard'
+import NoteCard, { NoteCardLoadingSkeleton } from '../NoteCard'
-import PictureNoteCard from '../PictureNoteCard'
+import { PictureNoteCardMasonry } from '../PictureNoteCardMasonry'
+import TabSwitcher from '../TabSwitch'
 
 const LIMIT = 100
 const ALGO_LIMIT = 500
@@ -28,19 +27,23 @@ const SHOW_COUNT = 10
 export default function NoteList({
   relayUrls = [],
   filter = {},
+  author,
   className,
   filterMutedNotes = true,
-  needCheckAlgoRelay = false
+  needCheckAlgoRelay = false,
+  isMainFeed = false
 }: {
   relayUrls?: string[]
   filter?: Filter
+  author?: string
   className?: string
   filterMutedNotes?: boolean
   needCheckAlgoRelay?: boolean
+  isMainFeed?: boolean
 }) {
   const { t } = useTranslation()
   const { isLargeScreen } = useScreenSize()
-  const { startLogin } = useNostr()
+  const { pubkey, startLogin } = useNostr()
   const { mutePubkeys } = useMuteList()
   const [refreshCount, setRefreshCount] = useState(0)
   const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
@@ -49,15 +52,11 @@ export default function NoteList({
   const [showCount, setShowCount] = useState(SHOW_COUNT)
   const [hasMore, setHasMore] = useState<boolean>(true)
   const [loading, setLoading] = useState(true)
-  const [listMode, setListMode] = useState<TNoteListMode>(() => storage.getNoteListMode())
+  const [listMode, setListMode] = useState<TNoteListMode>(() =>
+    isMainFeed ? storage.getNoteListMode() : 'posts'
+  )
+  const [filterType, setFilterType] = useState<Exclude<TNoteListMode, 'postsAndReplies'>>('posts')
   const bottomRef = useRef<HTMLDivElement | null>(null)
-  const isPictures = useMemo(() => listMode === 'pictures', [listMode])
-  const noteFilter = useMemo(() => {
-    return {
-      kinds: isPictures ? [ExtendedKind.PICTURE] : [kinds.ShortTextNote, kinds.Repost],
-      ...filter
-    }
-  }, [JSON.stringify(filter), isPictures])
   const topRef = useRef<HTMLDivElement | null>(null)
   const filteredNewEvents = useMemo(() => {
     return newEvents.filter((event: Event) => {
@@ -69,7 +68,26 @@ export default function NoteList({
   }, [newEvents, listMode, filterMutedNotes, mutePubkeys])
 
   useEffect(() => {
-    if (relayUrls.length === 0 && !noteFilter.authors?.length) return
+    switch (listMode) {
+      case 'posts':
+      case 'postsAndReplies':
+        setFilterType('posts')
+        break
+      case 'pictures':
+        setFilterType('pictures')
+        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)
@@ -78,14 +96,105 @@ export default function NoteList({
       setHasMore(true)
 
       let areAlgoRelays = false
-      if (needCheckAlgoRelay) {
+      const subRequests: {
-        const relayInfos = await relayInfoService.getRelayInfos(relayUrls)
+        urls: string[]
-        areAlgoRelays = relayInfos.every((relayInfo) => checkAlgoRelay(relayInfo))
+        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.ShortTextNote, kinds.Repost],
+            authors: [pubkey],
+            '#p': [author],
+            limit: LIMIT
+          }
+        })
+        subRequests.push({
+          urls: targetRelayList.write.concat(BIG_RELAY_URLS).slice(0, 5),
+          filter: {
+            kinds: [kinds.ShortTextNote, kinds.Repost],
+            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:
+            filterType === 'pictures'
+              ? [ExtendedKind.PICTURE]
+              : [kinds.ShortTextNote, kinds.Repost],
+          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(
-        [...relayUrls],
+        subRequests,
-        { ...noteFilter, limit: areAlgoRelays ? ALGO_LIMIT : LIMIT },
         {
           onEvents: (events, eosed) => {
             if (events.length > 0) {
@@ -118,7 +227,7 @@ export default function NoteList({
     return () => {
       promise.then((closer) => closer())
     }
-  }, [JSON.stringify(relayUrls), noteFilter, refreshCount])
+  }, [JSON.stringify(relayUrls), filterType, refreshCount])
 
   useEffect(() => {
     const options = {
@@ -168,29 +277,49 @@ export default function NoteList({
         observerInstance.unobserve(currentBottomRef)
       }
     }
-  }, [timelineKey, loading, hasMore, events, noteFilter, showCount])
+  }, [timelineKey, loading, hasMore, events, filterType, showCount])
 
   const showNewEvents = () => {
-    topRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })
     setEvents((oldEvents) => [...newEvents, ...oldEvents])
     setNewEvents([])
+    setTimeout(() => {
+      topRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }, 0)
   }
 
   return (
     <div className={className}>
-      <ListModeSwitch
+      <TabSwitcher
-        listMode={listMode}
+        value={listMode}
-        setListMode={(listMode) => {
+        tabs={
-          setListMode(listMode)
+          pubkey && author && pubkey !== author
+            ? [
+                { value: 'posts', label: 'Notes' },
+                { value: 'postsAndReplies', label: 'Replies' },
+                { value: 'pictures', label: 'Pictures' },
+                { value: 'you', label: 'YouTabName' }
+              ]
+            : [
+                { value: 'posts', label: 'Notes' },
+                { value: 'postsAndReplies', label: 'Replies' },
+                { value: 'pictures', label: 'Pictures' }
+              ]
+        }
+        onTabChange={(listMode) => {
+          setListMode(listMode as TNoteListMode)
           setShowCount(SHOW_COUNT)
-          topRef.current?.scrollIntoView({ behavior: 'instant', block: 'end' })
+          if (isMainFeed) {
-          storage.setNoteListMode(listMode)
+            storage.setNoteListMode(listMode as TNoteListMode)
+          }
+          setTimeout(() => {
+            topRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+          }, 0)
         }}
       />
-      <div ref={topRef} />
       {filteredNewEvents.length > 0 && (
         <NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />
       )}
+      <div ref={topRef} className="scroll-mt-24" />
       <PullToRefresh
         onRefresh={async () => {
           setRefreshCount((count) => count + 1)
@@ -198,8 +327,8 @@ export default function NoteList({
         }}
         pullingContent=""
       >
-        <div>
+        <div className="min-h-screen">
-          {isPictures ? (
+          {listMode === 'pictures' ? (
             <PictureNoteCardMasonry
               className="px-2 sm:px-4 mt-2"
               columnCount={isLargeScreen ? 3 : 2}
@@ -222,7 +351,7 @@ export default function NoteList({
           )}
           {hasMore || loading ? (
             <div ref={bottomRef}>
-              <LoadingSkeleton isPictures={isPictures} />
+              <NoteCardLoadingSkeleton isPictures={listMode === 'pictures'} />
             </div>
           ) : events.length ? (
             <div className="text-center text-sm text-muted-foreground mt-2">
@@ -240,117 +369,3 @@ export default function NoteList({
     </div>
   )
 }
-
-function ListModeSwitch({
-  listMode,
-  setListMode
-}: {
-  listMode: TNoteListMode
-  setListMode: (listMode: TNoteListMode) => void
-}) {
-  const { t } = useTranslation()
-  const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
-
-  return (
-    <div
-      className={cn(
-        'sticky top-12 bg-background z-30 duration-700 transition-transform select-none',
-        deepBrowsing && lastScrollTop > 800 ? '-translate-y-[calc(100%+12rem)]' : ''
-      )}
-    >
-      <div className="flex">
-        <div
-          className={`w-1/3 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${listMode === 'posts' ? '' : 'text-muted-foreground'}`}
-          onClick={() => setListMode('posts')}
-        >
-          {t('Notes')}
-        </div>
-        <div
-          className={`w-1/3 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${listMode === 'postsAndReplies' ? '' : 'text-muted-foreground'}`}
-          onClick={() => setListMode('postsAndReplies')}
-        >
-          {t('Replies')}
-        </div>
-        <div
-          className={`w-1/3 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${listMode === 'pictures' ? '' : 'text-muted-foreground'}`}
-          onClick={() => setListMode('pictures')}
-        >
-          {t('Pictures')}
-        </div>
-      </div>
-      <div
-        className={`w-1/3 px-4 sm:px-6 transition-transform duration-500 ${listMode === 'postsAndReplies' ? 'translate-x-full' : listMode === 'pictures' ? 'translate-x-[200%]' : ''} `}
-      >
-        <div className="w-full h-1 bg-primary rounded-full" />
-      </div>
-    </div>
-  )
-}
-
-function PictureNoteCardMasonry({
-  events,
-  columnCount,
-  className
-}: {
-  events: Event[]
-  columnCount: 2 | 3
-  className?: string
-}) {
-  const columns = useMemo(() => {
-    const newColumns: ReactNode[][] = Array.from({ length: columnCount }, () => [])
-    events.forEach((event, i) => {
-      newColumns[i % columnCount].push(
-        <PictureNoteCard key={event.id} className="w-full" event={event} />
-      )
-    })
-    return newColumns
-  }, [events, columnCount])
-
-  return (
-    <div
-      className={cn(
-        'grid',
-        columnCount === 2 ? 'grid-cols-2 gap-2' : 'grid-cols-3 gap-4',
-        className
-      )}
-    >
-      {columns.map((column, i) => (
-        <div key={i} className={columnCount === 2 ? 'space-y-2' : 'space-y-4'}>
-          {column}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function LoadingSkeleton({ isPictures }: { isPictures: boolean }) {
-  const { t } = useTranslation()
-
-  if (isPictures) {
-    return <div className="text-center text-sm text-muted-foreground">{t('loading...')}</div>
-  }
-
-  return (
-    <div className="px-4 py-3">
-      <div className="flex items-center space-x-2">
-        <Skeleton className="w-10 h-10 rounded-full" />
-        <div className={`flex-1 w-0`}>
-          <div className="py-1">
-            <Skeleton className="h-4 w-16" />
-          </div>
-          <div className="py-0.5">
-            <Skeleton className="h-3 w-12" />
-          </div>
-        </div>
-      </div>
-      <div className="pt-2">
-        <div className="my-1">
-          <Skeleton className="w-full h-4 my-1 mt-2" />
-        </div>
-        <div className="my-1">
-          <Skeleton className="w-2/3 h-4 my-1" />
-        </div>
-      </div>
-    </div>
-  )
-}

src/components/NotificationList/index.tsx

@@ -1,9 +1,7 @@
 import { Separator } from '@/components/ui/separator'
 import { Skeleton } from '@/components/ui/skeleton'
 import { BIG_RELAY_URLS, ExtendedKind } from '@/constants'
-import { cn } from '@/lib/utils'
 import { usePrimaryPage } from '@/PageManager'
-import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { useNoteStats } from '@/providers/NoteStatsProvider'
 import { useNotification } from '@/providers/NotificationProvider'
@@ -14,6 +12,7 @@ import { Event, kinds } from 'nostr-tools'
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PullToRefresh from 'react-simple-pull-to-refresh'
+import TabSwitcher from '../TabSwitch'
 import { NotificationItem } from './NotificationItem'
 
 const LIMIT = 100
@@ -76,12 +75,16 @@ const NotificationList = forwardRef((_, ref) => {
       const relayList = await client.fetchRelayList(pubkey)
 
       const { closer, timelineKey } = await client.subscribeTimeline(
-        relayList.read.length > 0 ? relayList.read.slice(0, 5) : BIG_RELAY_URLS,
+        [
-        {
+          {
-          '#p': [pubkey],
+            urls: relayList.read.length > 0 ? relayList.read.slice(0, 5) : BIG_RELAY_URLS,
-          kinds: filterKinds,
+            filter: {
-          limit: LIMIT
+              '#p': [pubkey],
-        },
+              kinds: filterKinds,
+              limit: LIMIT
+            }
+          }
+        ],
         {
           onEvents: (events, eosed) => {
             if (events.length > 0) {
@@ -186,11 +189,17 @@ const NotificationList = forwardRef((_, ref) => {
 
   return (
     <div>
-      <NotificationTypeSwitch
+      <TabSwitcher
-        type={notificationType}
+        value={notificationType}
-        setType={(type) => {
+        tabs={[
+          { value: 'all', label: 'All' },
+          { value: 'mentions', label: 'Mentions' },
+          { value: 'reactions', label: 'Reactions' },
+          { value: 'zaps', label: 'Zaps' }
+        ]}
+        onTabChange={(type) => {
           setShowCount(SHOW_COUNT)
-          setNotificationType(type)
+          setNotificationType(type as TNotificationType)
         }}
       />
       <PullToRefresh
@@ -234,55 +243,3 @@ const NotificationList = forwardRef((_, ref) => {
 })
 NotificationList.displayName = 'NotificationList'
 export default NotificationList
-
-function NotificationTypeSwitch({
-  type,
-  setType
-}: {
-  type: TNotificationType
-  setType: (type: TNotificationType) => void
-}) {
-  const { t } = useTranslation()
-  const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
-
-  return (
-    <div
-      className={cn(
-        'sticky top-12 bg-background z-30 duration-700 transition-transform select-none',
-        deepBrowsing && lastScrollTop > 800 ? '-translate-y-[calc(100%+12rem)]' : ''
-      )}
-    >
-      <div className="flex">
-        <div
-          className={`w-1/4 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${type === 'all' ? '' : 'text-muted-foreground'}`}
-          onClick={() => setType('all')}
-        >
-          {t('All')}
-        </div>
-        <div
-          className={`w-1/4 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${type === 'mentions' ? '' : 'text-muted-foreground'}`}
-          onClick={() => setType('mentions')}
-        >
-          {t('Mentions')}
-        </div>
-        <div
-          className={`w-1/4 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${type === 'reactions' ? '' : 'text-muted-foreground'}`}
-          onClick={() => setType('reactions')}
-        >
-          {t('Reactions')}
-        </div>
-        <div
-          className={`w-1/4 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${type === 'zaps' ? '' : 'text-muted-foreground'}`}
-          onClick={() => setType('zaps')}
-        >
-          {t('Zaps')}
-        </div>
-      </div>
-      <div
-        className={`w-1/4 px-4 sm:px-6 transition-transform duration-500 ${type === 'mentions' ? 'translate-x-full' : type === 'reactions' ? 'translate-x-[200%]' : type === 'zaps' ? 'translate-x-[300%]' : ''} `}
-      >
-        <div className="w-full h-1 bg-primary rounded-full" />
-      </div>
-    </div>
-  )
-}

src/components/PictureNoteCardMasonry/index.tsx

@@ -0,0 +1,40 @@
+import { cn } from '@/lib/utils'
+import { Event } from 'nostr-tools'
+import { useMemo } from 'react'
+import PictureNoteCard from '../PictureNoteCard'
+
+export function PictureNoteCardMasonry({
+  events,
+  columnCount,
+  className
+}: {
+  events: Event[]
+  columnCount: 2 | 3
+  className?: string
+}) {
+  const columns = useMemo(() => {
+    const newColumns: React.ReactNode[][] = Array.from({ length: columnCount }, () => [])
+    events.forEach((event, i) => {
+      newColumns[i % columnCount].push(
+        <PictureNoteCard key={event.id} className="w-full" event={event} />
+      )
+    })
+    return newColumns
+  }, [events, columnCount])
+
+  return (
+    <div
+      className={cn(
+        'grid',
+        columnCount === 2 ? 'grid-cols-2 gap-2' : 'grid-cols-3 gap-4',
+        className
+      )}
+    >
+      {columns.map((column, i) => (
+        <div key={i} className={columnCount === 2 ? 'space-y-2' : 'space-y-4'}>
+          {column}
+        </div>
+      ))}
+    </div>
+  )
+}

src/components/ReplyNoteList/index.tsx

@@ -97,12 +97,16 @@ export default function ReplyNoteList({
         const seenOn = client.getSeenEventRelayUrls(rootInfo.id)
         relayUrls.unshift(...seenOn)
         const { closer, timelineKey } = await client.subscribeTimeline(
-          relayUrls.slice(0, 5),
+          [
-          {
+            {
-            '#e': [rootInfo.id],
+              urls: relayUrls.slice(0, 5),
-            kinds: [kinds.ShortTextNote],
+              filter: {
-            limit: LIMIT
+                '#e': [rootInfo.id],
-          },
+                kinds: [kinds.ShortTextNote],
+                limit: LIMIT
+              }
+            }
+          ],
           {
             onEvents: (evts, eosed) => {
               if (evts.length > 0) {

src/components/ShowNewButton/index.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
+import { useTranslation } from 'react-i18next'
+
+export function ShowNewButton({ onClick }: { onClick: () => void }) {
+  const { t } = useTranslation()
+  const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
+
+  return (
+    <div
+      className={cn(
+        'sticky top-[6.25rem] flex justify-center w-full my-2 z-30 duration-700 transition-transform',
+        deepBrowsing && lastScrollTop > 800 ? '-translate-y-10' : ''
+      )}
+    >
+      <Button size="lg" onClick={onClick} className="drop-shadow-xl shadow-primary/50">
+        {t('show new notes')}
+      </Button>
+    </div>
+  )
+}

src/components/TabSwitch/index.tsx

@@ -0,0 +1,64 @@
+import { cn } from '@/lib/utils'
+import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
+import { useTranslation } from 'react-i18next'
+
+type TabDefinition = {
+  value: string
+  label: string
+  onClick?: () => void
+}
+
+export default function TabSwitcher({
+  tabs,
+  value,
+  className,
+  onTabChange
+}: {
+  tabs: TabDefinition[]
+  value: string
+  className?: string
+  onTabChange?: (tab: string) => void
+}) {
+  const { t } = useTranslation()
+  const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
+  const activeIndex = tabs.findIndex((tab) => tab.value === value)
+
+  return (
+    <div
+      className={cn(
+        'sticky top-12 bg-background z-30 w-full transition-transform',
+        deepBrowsing && lastScrollTop > 800 ? '-translate-y-[calc(100%+12rem)]' : '',
+        className
+      )}
+    >
+      <div className="flex">
+        {tabs.map((tab) => (
+          <div
+            key={tab.value}
+            className={cn(
+              `flex-1 text-center py-2 font-semibold clickable cursor-pointer rounded-lg`,
+              value === tab.value ? '' : 'text-muted-foreground'
+            )}
+            onClick={() => {
+              tab.onClick?.()
+              onTabChange?.(tab.value)
+            }}
+          >
+            {t(tab.label)}
+          </div>
+        ))}
+      </div>
+      <div className="relative">
+        <div
+          className="absolute bottom-0 px-4 transition-all duration-500"
+          style={{
+            width: `${100 / tabs.length}%`,
+            left: `${activeIndex >= 0 ? activeIndex * (100 / tabs.length) : 0}%`
+          }}
+        >
+          <div className="w-full h-1 bg-primary rounded-full" />
+        </div>
+      </div>
+    </div>
+  )
+}

src/i18n/locales/ar.ts

@@ -217,6 +217,7 @@ export default {
     'Choose a relay': 'اختر ريلاي',
     'no relays found': 'لم يتم العثور على ريلايات',
     video: 'فيديو',
-    'Show n new notes': 'عرض {{n}} ملاحظات جديدة'
+    'Show n new notes': 'عرض {{n}} ملاحظات جديدة',
+    YouTabName: 'أنت'
   }
 }

src/i18n/locales/de.ts

@@ -221,6 +221,7 @@ export default {
     'Choose a relay': 'Wähle ein Relay',
     'no relays found': 'Keine Relays gefunden',
     video: 'Video',
-    'Show n new notes': 'Zeige {{n}} neue Notizen'
+    'Show n new notes': 'Zeige {{n}} neue Notizen',
+    YouTabName: 'Du'
   }
 }

src/i18n/locales/en.ts

@@ -217,6 +217,7 @@ export default {
     'Choose a relay': 'Choose a relay',
     'no relays found': 'no relays found',
     video: 'video',
-    'Show n new notes': 'Show {{n}} new notes'
+    'Show n new notes': 'Show {{n}} new notes',
+    YouTabName: 'You'
   }
 }

src/i18n/locales/es.ts

@@ -221,6 +221,7 @@ export default {
     'Choose a relay': 'Selecciona un relé',
     'no relays found': 'no se encontraron relés',
     video: 'video',
-    'Show n new notes': 'Mostrar {{n}} nuevas notas'
+    'Show n new notes': 'Mostrar {{n}} nuevas notas',
+    YouTabName: 'You'
   }
 }

src/i18n/locales/fr.ts

@@ -220,6 +220,7 @@ export default {
     'Choose a relay': 'Choisir un relais',
     'no relays found': 'aucun relais trouvé',
     video: 'vidéo',
-    'Show n new notes': 'Afficher {{n}} nouvelles notes'
+    'Show n new notes': 'Afficher {{n}} nouvelles notes',
+    YouTabName: 'Vous'
   }
 }

src/i18n/locales/it.ts

@@ -220,6 +220,7 @@ export default {
     'Choose a relay': 'Scegli un relay',
     'no relays found': 'Nessun relay trovato',
     video: 'video',
-    'Show n new notes': 'Mostra {{n}} nuove note'
+    'Show n new notes': 'Mostra {{n}} nuove note',
+    YouTabName: 'Tu'
   }
 }

src/i18n/locales/ja.ts

@@ -218,6 +218,7 @@ export default {
     'Choose a relay': 'リレイを選択',
     'no relays found': 'リレイが見つかりません',
     video: 'ビデオ',
-    'Show n new notes': '新しいノートを{{n}}件表示'
+    'Show n new notes': '新しいノートを{{n}}件表示',
+    YouTabName: 'あなた'
   }
 }

src/i18n/locales/pl.ts

@@ -219,6 +219,7 @@ export default {
     'Choose a relay': 'Wybierz transmiter',
     'no relays found': 'Nie znaleziono transmiterów',
     video: 'wideo',
-    'Show n new notes': 'Pokaż {{n}} nowych wpisów'
+    'Show n new notes': 'Pokaż {{n}} nowych wpisów',
+    YouTabName: 'Ty'
   }
 }

src/i18n/locales/pt-BR.ts

@@ -219,6 +219,7 @@ export default {
     'Choose a relay': 'Escolher um relé',
     'no relays found': 'nenhum relé encontrado',
     video: 'vídeo',
-    'Show n new notes': 'Mostrar {{n}} novas notas'
+    'Show n new notes': 'Mostrar {{n}} novas notas',
+    YouTabName: 'Você'
   }
 }

src/i18n/locales/pt-PT.ts

@@ -220,6 +220,7 @@ export default {
     'Choose a relay': 'Escolher um Relé',
     'no relays found': 'nenhum relé encontrado',
     video: 'vídeo',
-    'Show n new notes': 'Mostrar {{n}} novas notas'
+    'Show n new notes': 'Mostrar {{n}} novas notas',
+    YouTabName: 'Você'
   }
 }

src/i18n/locales/ru.ts

@@ -221,6 +221,7 @@ export default {
     'Choose a relay': 'Выберите ретранслятор',
     'no relays found': 'ретрансляторы не найдены',
     video: 'видео',
-    'Show n new notes': 'Показать {{n}} новых заметок'
+    'Show n new notes': 'Показать {{n}} новых заметок',
+    YouTabName: 'Вы'
   }
 }

src/i18n/locales/zh.ts

@@ -218,6 +218,7 @@ export default {
     'Choose a relay': '选择一个服务器',
     'no relays found': '未找到服务器',
     video: '视频',
-    'Show n new notes': '显示 {{n}} 条新笔记'
+    'Show n new notes': '显示 {{n}} 条新笔记',
+    YouTabName: '与你'
   }
 }

src/pages/primary/ExplorePage/index.tsx

@@ -1,8 +1,7 @@
 import FollowingFavoriteRelayList from '@/components/FollowingFavoriteRelayList'
 import RelayList from '@/components/RelayList'
+import TabSwitcher from '@/components/TabSwitch'
 import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
-import { cn } from '@/lib/utils'
-import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
 import { Compass } from 'lucide-react'
 import { forwardRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -19,7 +18,14 @@ const ExplorePage = forwardRef((_, ref) => {
       titlebar={<ExplorePageTitlebar />}
       displayScrollToTopButton
     >
-      <Tabs value={tab} setValue={setTab} />
+      <TabSwitcher
+        value={tab}
+        tabs={[
+          { value: 'following', label: "Following's Favorites" },
+          { value: 'all', label: 'All' }
+        ]}
+        onTabChange={(tab) => setTab(tab as TExploreTabs)}
+      />
       {tab === 'following' ? <FollowingFavoriteRelayList /> : <RelayList />}
     </PrimaryPageLayout>
   )
@@ -37,43 +43,3 @@ function ExplorePageTitlebar() {
     </div>
   )
 }
-
-function Tabs({
-  value,
-  setValue
-}: {
-  value: TExploreTabs
-  setValue: (value: TExploreTabs) => void
-}) {
-  const { t } = useTranslation()
-  const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
-
-  return (
-    <div
-      className={cn(
-        'sticky top-12 bg-background z-30 duration-700 transition-transform select-none',
-        deepBrowsing && lastScrollTop > 800 ? '-translate-y-[calc(100%+12rem)]' : ''
-      )}
-    >
-      <div className="flex">
-        <div
-          className={`w-1/2 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${value === 'following' ? '' : 'text-muted-foreground'}`}
-          onClick={() => setValue('following')}
-        >
-          {t("Following's Favorites")}
-        </div>
-        <div
-          className={`w-1/2 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${value === 'all' ? '' : 'text-muted-foreground'}`}
-          onClick={() => setValue('all')}
-        >
-          {t('All')}
-        </div>
-      </div>
-      <div
-        className={`w-1/2 px-4 sm:px-6 transition-transform duration-500 ${value === 'all' ? 'translate-x-full' : ''}`}
-      >
-        <div className="w-full h-1 bg-primary rounded-full" />
-      </div>
-    </div>
-  )
-}

src/pages/primary/NoteListPage/index.tsx

@@ -41,6 +41,7 @@ const NoteListPage = forwardRef((_, ref) => {
         relayUrls={relayUrls}
         filter={filter}
         needCheckAlgoRelay={feedInfo.feedType !== 'following'}
+        isMainFeed
       />
     )
   }

src/pages/secondary/ProfilePage/index.tsx

@@ -144,7 +144,7 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
           </div>
         </div>
       </div>
-      <NoteList filter={{ authors: [pubkey] }} className="mt-2" filterMutedNotes={false} />
+      <NoteList author={pubkey} className="mt-2" filterMutedNotes={false} />
     </SecondaryPageLayout>
   )
 })

src/services/client.service.ts

@@ -3,7 +3,6 @@ import { getProfileFromProfileEvent, getRelayListFromRelayListEvent } from '@/li
 import { formatPubkey, userIdToPubkey } from '@/lib/pubkey'
 import { extractPubkeysFromEventTags } from '@/lib/tag'
 import { isLocalNetworkUrl, isWebsocketUrl, normalizeUrl } from '@/lib/url'
-import { isSafari } from '@/lib/utils'
 import { ISigner, TProfile, TRelayList } from '@/types'
 import { sha256 } from '@noble/hashes/sha2'
 import DataLoader from 'dataloader'
@@ -157,9 +156,17 @@ class ClientService extends EventTarget {
     return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
   }
 
+  private generateMultipleTimelinesKey(subRequests: { urls: string[]; filter: Filter }[]) {
+    const keys = subRequests.map(({ urls, filter }) => this.generateTimelineKey(urls, filter))
+    const encoder = new TextEncoder()
+    const data = encoder.encode(JSON.stringify(keys.sort()))
+    const hashBuffer = sha256(data)
+    const hashArray = Array.from(new Uint8Array(hashBuffer))
+    return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
+  }
+
   async subscribeTimeline(
-    urls: string[],
+    subRequests: { urls: string[]; filter: Omit<Filter, 'since' | 'until'> & { limit: number } }[],
-    { authors, ...filter }: Omit<Filter, 'since' | 'until'> & { limit: number },
     {
       onEvents,
       onNew
@@ -175,65 +182,6 @@ class ClientService extends EventTarget {
       needSort?: boolean
     } = {}
   ) {
-    if (urls.length || !authors?.length) {
-      return this._subscribeTimeline(
-        urls.length ? urls : BIG_RELAY_URLS,
-        filter,
-        { onEvents, onNew },
-        { startLogin, needSort }
-      )
-    }
-
-    const subRequests: { urls: string[]; authors: string[] }[] = []
-    // If many websocket connections are initiated simultaneously, it will be
-    // very slow on Safari (for unknown reason)
-    if (authors.length > 5 && isSafari()) {
-      const pubkey = await this.signer?.getPublicKey()
-      if (!pubkey) {
-        subRequests.push({ urls: BIG_RELAY_URLS, authors })
-      } else {
-        const relayList = await this.fetchRelayList(pubkey)
-        const urls = relayList.read.concat(BIG_RELAY_URLS).slice(0, 5)
-        subRequests.push({ urls, authors })
-      }
-    } else {
-      const relayLists = await this.fetchRelayLists(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(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],
-          authors: Array.from(authors)
-        }))
-      )
-    }
-
     const newEventIdSet = new Set<string>()
     const requestCount = subRequests.length
     let eventIdSet = new Set<string>()
@@ -241,10 +189,10 @@ class ClientService extends EventTarget {
     let eosedCount = 0
 
     const subs = await Promise.all(
-      subRequests.map(({ urls, authors }) => {
+      subRequests.map(({ urls, filter }) => {
         return this._subscribeTimeline(
           urls,
-          { ...filter, authors },
+          filter,
           {
             onEvents: (_events, _eosed) => {
               if (_eosed) {
@@ -265,12 +213,12 @@ class ClientService extends EventTarget {
               onNew(evt)
             }
           },
-          { startLogin }
+          { startLogin, needSort }
         )
       })
     )
 
-    const key = this.generateTimelineKey([], { ...filter, authors })
+    const key = this.generateMultipleTimelinesKey(subRequests)
     this.timelines[key] = subs.map((sub) => sub.timelineKey)
 
     return {

src/types.ts

@@ -101,7 +101,7 @@ export type TLanguage = 'en' | 'zh' | 'pl'
 
 export type TImageInfo = { url: string; blurHash?: string; dim?: { width: number; height: number } }
 
-export type TNoteListMode = 'posts' | 'postsAndReplies' | 'pictures'
+export type TNoteListMode = 'posts' | 'postsAndReplies' | 'pictures' | 'you'
 
 export type TNotificationType = 'all' | 'mentions' | 'reactions' | 'zaps'