feat: remind users to optimize relay settings

src/components/MailboxSetting/RelayCountWarning.tsx

@@ -0,0 +1,37 @@
+import { TMailboxRelay } from '@/types'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import AlertCard from '../AlertCard'
+
+export default function RelayCountWarning({ relays }: { relays: TMailboxRelay[] }) {
+  const { t } = useTranslation()
+  const readRelayCount = useMemo(() => {
+    return relays.filter((r) => r.scope !== 'write').length
+  }, [relays])
+  const writeRelayCount = useMemo(() => {
+    return relays.filter((r) => r.scope !== 'read').length
+  }, [relays])
+  const showReadWarning = readRelayCount > 4
+  const showWriteWarning = writeRelayCount > 4
+
+  if (!showReadWarning && !showWriteWarning) {
+    return null
+  }
+
+  return (
+    <AlertCard
+      title={showReadWarning ? t('Too many read relays') : t('Too many write relays')}
+      content={
+        showReadWarning
+          ? t(
+              'You have {{count}} read relays. Most clients only use 2-4 relays, setting more is unnecessary.',
+              { count: readRelayCount }
+            )
+          : t(
+              'You have {{count}} write relays. Most clients only use 2-4 relays, setting more is unnecessary.',
+              { count: writeRelayCount }
+            )
+      }
+    />
+  )
+}

src/components/MailboxSetting/index.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import MailboxRelay from './MailboxRelay'
 import NewMailboxRelayInput from './NewMailboxRelayInput'
+import RelayCountWarning from './RelayCountWarning'
 import SaveButton from './SaveButton'
 
 export default function MailboxSetting() {
@@ -65,6 +66,7 @@ export default function MailboxSetting() {
         <div>{t('write relays description')}</div>
         <div>{t('read & write relays notice')}</div>
       </div>
+      <RelayCountWarning relays={relays} />
       <SaveButton mailboxRelays={relays} hasChange={hasChange} setHasChange={setHasChange} />
       <div className="space-y-2">
         {relays.map((relay) => (