diff --git a/src/PageManager.tsx b/src/PageManager.tsx
index d010e7eb..913f5cb9 100644
--- a/src/PageManager.tsx
+++ b/src/PageManager.tsx
@@ -15,6 +15,7 @@ import {
useRef,
useState
} from 'react'
+import TooManyRelaysAlertDialog from './components/TooManyRelaysAlertDialog'
import ExplorePage from './pages/primary/ExplorePage'
import MePage from './pages/primary/MePage'
import NotificationListPage from './pages/primary/NotificationListPage'
@@ -300,6 +301,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
{element}
))}
+
@@ -387,6 +389,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
+
diff --git a/src/components/AlertCard/index.tsx b/src/components/AlertCard/index.tsx
new file mode 100644
index 00000000..c3142842
--- /dev/null
+++ b/src/components/AlertCard/index.tsx
@@ -0,0 +1,13 @@
+import { TriangleAlert } from 'lucide-react'
+
+export default function AlertCard({ title, content }: { title: string; content: string }) {
+ return (
+
+ )
+}
diff --git a/src/components/MailboxSetting/RelayCountWarning.tsx b/src/components/MailboxSetting/RelayCountWarning.tsx
new file mode 100644
index 00000000..584aa294
--- /dev/null
+++ b/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 (
+
+ )
+}
diff --git a/src/components/MailboxSetting/index.tsx b/src/components/MailboxSetting/index.tsx
index 6e6f8025..be432f3a 100644
--- a/src/components/MailboxSetting/index.tsx
+++ b/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() {
{t('write relays description')}
{t('read & write relays notice')}
+
{relays.map((relay) => (
diff --git a/src/components/PostEditor/PollEditor.tsx b/src/components/PostEditor/PollEditor.tsx
index 9ee036ea..48ccc13a 100644
--- a/src/components/PostEditor/PollEditor.tsx
+++ b/src/components/PostEditor/PollEditor.tsx
@@ -5,9 +5,10 @@ import { Switch } from '@/components/ui/switch'
import { normalizeUrl } from '@/lib/url'
import { TPollCreateData } from '@/types'
import dayjs from 'dayjs'
-import { AlertCircle, Eraser, X } from 'lucide-react'
+import { Eraser, X } from 'lucide-react'
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
+import AlertCard from '../AlertCard'
export default function PollEditor({
pollCreateData,
@@ -124,17 +125,12 @@ export default function PollEditor({
-
-
-
-
{t('This is a poll note.')}
-
-
- {t(
- 'Unlike regular notes, polls are not widely supported and may not display on other clients.'
- )}
-
-
+