feat: calculate optimal read relays

src/components/MailboxSetting/CalculateOptimalReadRelaysButton.tsx

@@ -0,0 +1,248 @@
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger
+} from '@/components/ui/drawer'
+import { toProfile } from '@/lib/link'
+import { useSecondaryPage } from '@/PageManager'
+import { useNostr } from '@/providers/NostrProvider'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import client from '@/services/client.service'
+import { TMailboxRelay } from '@/types'
+import { ChevronDown, Circle, CircleCheck, ScanSearch } from 'lucide-react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import RelayIcon from '../RelayIcon'
+import { SimpleUserAvatar } from '../UserAvatar'
+import { SimpleUsername } from '../Username'
+
+export default function CalculateOptimalReadRelaysButton({
+  mergeRelays
+}: {
+  mergeRelays: (newRelays: TMailboxRelay[]) => void
+}) {
+  const { t } = useTranslation()
+  const { isSmallScreen } = useScreenSize()
+  const { pubkey } = useNostr()
+  const [open, setOpen] = useState(false)
+
+  const trigger = (
+    <Button variant="secondary" className="w-full" disabled={!pubkey}>
+      <ScanSearch />
+      {t('Calculate optimal read relays')}
+    </Button>
+  )
+
+  if (isSmallScreen) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent className="max-h-[90vh]">
+          <div className="flex flex-col p-4 gap-4 overflow-auto">
+            <DrawerHeader>
+              <DrawerTitle>{t('Select relays to append')}</DrawerTitle>
+              <DrawerDescription className="hidden" />
+            </DrawerHeader>
+            <OptimalReadRelays close={() => setOpen(false)} mergeRelays={mergeRelays} />
+          </div>
+        </DrawerContent>
+      </Drawer>
+    )
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent className="max-h-[90vh] overflow-auto">
+        <DialogHeader>
+          <DialogTitle>{t('Select relays to append')}</DialogTitle>
+          <DialogDescription className="hidden" />
+        </DialogHeader>
+        <OptimalReadRelays close={() => setOpen(false)} mergeRelays={mergeRelays} />
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function OptimalReadRelays({
+  close,
+  mergeRelays
+}: {
+  close: () => void
+  mergeRelays: (newRelays: TMailboxRelay[]) => void
+}) {
+  const { t } = useTranslation()
+  const { pubkey } = useNostr()
+  const [isCalculating, setIsCalculating] = useState(false)
+  const [optimalReadRelays, setOptimalReadRelays] = useState<{ url: string; pubkeys: string[] }[]>(
+    []
+  )
+  const [selectedRelayUrls, setSelectedRelayUrls] = useState<string[]>([])
+
+  useEffect(() => {
+    if (!pubkey) return
+
+    const init = async () => {
+      setIsCalculating(true)
+      const relays = await client.calculateOptimalReadRelays(pubkey)
+      console.log(relays)
+      setOptimalReadRelays(relays)
+      setIsCalculating(false)
+    }
+    init()
+  }, [])
+
+  if (isCalculating) {
+    return <div className="text-center text-sm text-muted-foreground">{t('calculating...')}</div>
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        {optimalReadRelays.map((relay) => (
+          <RelayItem
+            key={relay.url}
+            relay={relay}
+            close={close}
+            selectedRelayUrls={selectedRelayUrls}
+            setSelectedRelayUrls={setSelectedRelayUrls}
+          />
+        ))}
+      </div>
+      <Button
+        disabled={selectedRelayUrls.length === 0}
+        className="w-full"
+        onClick={() => {
+          mergeRelays(
+            selectedRelayUrls.map((url) => ({
+              url,
+              scope: 'read'
+            }))
+          )
+          close()
+        }}
+      >
+        {selectedRelayUrls.length === 0
+          ? t('Append')
+          : t('Append n relays', { n: selectedRelayUrls.length })}
+      </Button>
+    </div>
+  )
+}
+
+function RelayItem({
+  relay,
+  close,
+  selectedRelayUrls,
+  setSelectedRelayUrls
+}: {
+  relay: { url: string; pubkeys: string[] }
+  close: () => void
+  selectedRelayUrls: string[]
+  setSelectedRelayUrls: Dispatch<SetStateAction<string[]>>
+}) {
+  const { t } = useTranslation()
+  const { push } = useSecondaryPage()
+  const [expanded, setExpanded] = useState(false)
+
+  const selected = selectedRelayUrls.includes(relay.url)
+
+  return (
+    <div
+      className={`rounded-lg p-4 border select-none cursor-pointer ${selected ? 'border-highlight bg-highlight/5' : ''}`}
+      onClick={() =>
+        setSelectedRelayUrls((pre) =>
+          pre.includes(relay.url) ? pre.filter((url) => url !== relay.url) : [...pre, relay.url]
+        )
+      }
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 flex-1 w-0">
+          <SelectToggle
+            select={selectedRelayUrls.includes(relay.url)}
+            setSelect={(select) => {
+              setSelectedRelayUrls((prev) =>
+                select ? [...prev, relay.url] : prev.filter((url) => url !== relay.url)
+              )
+            }}
+          />
+          <RelayIcon url={relay.url} className="h-8 w-8" />
+          <div className="font-semibold truncate text-lg">{relay.url}</div>
+        </div>
+        <div
+          className="flex items-center cursor-pointer gap-1 text-muted-foreground hover:text-foreground text-sm"
+          onClick={(e) => {
+            e.stopPropagation()
+            setExpanded((prev) => !prev)
+          }}
+        >
+          <div>
+            {relay.pubkeys.length} {t('followings')}
+          </div>
+          <ChevronDown
+            size={16}
+            className={`transition-transform duration-200 ${expanded ? 'rotate-180' : ''}`}
+          />
+        </div>
+      </div>
+      {expanded && (
+        <div className="space-y-2 pt-2 pl-7">
+          {relay.pubkeys.map((pubkey) => (
+            <div
+              key={pubkey}
+              className="flex cursor-pointer items-center gap-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                close()
+                push(toProfile(pubkey))
+              }}
+            >
+              <SimpleUserAvatar userId={pubkey} size="small" />
+              <SimpleUsername userId={pubkey} className="font-semibold truncate" />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function SelectToggle({
+  select,
+  setSelect
+}: {
+  select: boolean
+  setSelect: (select: boolean) => void
+}) {
+  return select ? (
+    <CircleCheck
+      size={18}
+      className="text-highlight shrink-0 cursor-pointer"
+      onClick={(e) => {
+        e.stopPropagation()
+        setSelect(false)
+      }}
+    />
+  ) : (
+    <Circle
+      size={18}
+      className="shrink-0 cursor-pointer"
+      onClick={(e) => {
+        e.stopPropagation()
+        setSelect(true)
+      }}
+    />
+  )
+}

src/components/MailboxSetting/index.tsx

@@ -4,6 +4,7 @@ import { useNostr } from '@/providers/NostrProvider'
 import { TMailboxRelay, TMailboxRelayScope } from '@/types'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import CalculateOptimalReadRelaysButton from './CalculateOptimalReadRelaysButton'
 import MailboxRelay from './MailboxRelay'
 import NewMailboxRelayInput from './NewMailboxRelayInput'
 import SaveButton from './SaveButton'
@@ -49,6 +50,13 @@ export default function MailboxSetting() {
     return null
   }
 
+  const mergeRelays = (newRelays: TMailboxRelay[]) => {
+    setRelays((pre) => {
+      return [...pre, ...newRelays.filter((r) => !pre.some((pr) => pr.url === r.url))]
+    })
+    setHasChange(true)
+  }
+
   return (
     <div className="space-y-4">
       <div className="text-xs text-muted-foreground space-y-1">
@@ -56,6 +64,7 @@ export default function MailboxSetting() {
         <div>{t('write relays description')}</div>
         <div>{t('read & write relays notice')}</div>
       </div>
+      <CalculateOptimalReadRelaysButton mergeRelays={mergeRelays} />
       <SaveButton mailboxRelays={relays} hasChange={hasChange} setHasChange={setHasChange} />
       <div className="space-y-2">
         {relays.map((relay) => (

src/i18n/en.ts

@@ -12,6 +12,7 @@ export default {
     Profile: 'Profile',
     Logout: 'Logout',
     Following: 'Following',
+    followings: 'followings',
     reposted: 'reposted',
     'just now': 'just now',
     'n minutes ago': '{{n}} minutes ago',
@@ -153,6 +154,11 @@ export default {
     Unmute: 'Unmute',
     'mute author': 'mute author',
     'mute user': 'mute user',
-    'unmute user': 'unmute user'
+    'unmute user': 'unmute user',
+    'Append n relays': 'Append {{n}} relays',
+    Append: 'Append',
+    'Select relays to append': 'Select relays to append',
+    'calculating...': 'calculating...',
+    'Calculate optimal read relays': 'Calculate optimal read relays'
   }
 }

src/i18n/zh.ts

@@ -12,6 +12,7 @@ export default {
     Profile: '个人资料',
     Logout: '退出登录',
     Following: '关注',
+    followings: '关注',
     reposted: '转发',
     'just now': '刚刚',
     'n minutes ago': '{{n}} 分钟前',
@@ -154,6 +155,11 @@ export default {
     Unmute: '取消屏蔽',
     'mute author': '屏蔽作者',
     'mute user': '屏蔽用户',
-    'unmute user': '取消屏蔽用户'
+    'unmute user': '取消屏蔽用户',
+    'Append n relays': '追加 {{n}} 个服务器',
+    Append: '追加',
+    'Select relays to append': '选择要追加的服务器',
+    'calculating...': '计算中...',
+    'Calculate optimal read relays': '计算最佳读服务器'
   }
 }

src/services/client.service.ts

@@ -54,7 +54,8 @@ class ClientService extends EventTarget {
   private relayListEventDataLoader = new DataLoader<string, NEvent | undefined>(
     this.relayListEventBatchLoadFn.bind(this),
     {
-      cacheMap: new LRUCache<string, Promise<NEvent | undefined>>({ max: 10000 })
+      cacheMap: new LRUCache<string, Promise<NEvent | undefined>>({ max: 10000 }),
+      maxBatchSize: 10
     }
   )
   private relayInfoDataLoader = new DataLoader<string, TRelayInfo | undefined>(async (urls) => {
@@ -446,6 +447,58 @@ class ClientService extends EventTarget {
     return infos.map((info) => (info ? (info instanceof Error ? undefined : info) : undefined))
   }
 
+  async calculateOptimalReadRelays(pubkey: string) {
+    const followings = await this.fetchFollowings(pubkey)
+    const [selfRelayListEvent, ...relayListEvents] = await this.relayListEventDataLoader.loadMany([
+      pubkey,
+      ...followings
+    ])
+    const selfReadRelays =
+      selfRelayListEvent && !(selfRelayListEvent instanceof Error)
+        ? getRelayListFromRelayListEvent(selfRelayListEvent).read
+        : []
+    const pubkeyRelayListMap = new Map<string, string[]>()
+    relayListEvents.forEach((evt) => {
+      if (evt && !(evt instanceof Error)) {
+        pubkeyRelayListMap.set(evt.pubkey, getRelayListFromRelayListEvent(evt).write)
+      }
+    })
+
+    let uncoveredPubkeys = [...followings]
+    const readRelays: { url: string; pubkeys: string[] }[] = []
+    while (uncoveredPubkeys.length) {
+      const relayMap = new Map<string, string[]>()
+      uncoveredPubkeys.forEach((pubkey) => {
+        const relays = pubkeyRelayListMap.get(pubkey)
+        if (relays) {
+          relays.forEach((url) => {
+            relayMap.set(url, (relayMap.get(url) || []).concat(pubkey))
+          })
+        }
+      })
+      let maxCoveredRelay: { url: string; pubkeys: string[] } | undefined
+      for (const [url, pubkeys] of relayMap.entries()) {
+        if (!maxCoveredRelay) {
+          maxCoveredRelay = { url, pubkeys }
+        } else if (pubkeys.length > maxCoveredRelay.pubkeys.length) {
+          maxCoveredRelay = { url, pubkeys }
+        } else if (
+          pubkeys.length === maxCoveredRelay.pubkeys.length &&
+          selfReadRelays.includes(url)
+        ) {
+          maxCoveredRelay = { url, pubkeys }
+        }
+      }
+      if (!maxCoveredRelay) break
+
+      readRelays.push(maxCoveredRelay)
+      uncoveredPubkeys = uncoveredPubkeys.filter(
+        (pubkey) => !maxCoveredRelay!.pubkeys.includes(pubkey)
+      )
+    }
+    return readRelays
+  }
+
   private async fetchEventById(relayUrls: string[], id: string): Promise<NEvent | undefined> {
     const event = await this.fetchEventFromDefaultRelaysDataloader.load(id)
     if (event) {