diff --git a/src/components/ConnectedRelays/ActiveRelaysTitlebarButton.tsx b/src/components/ConnectedRelays/ActiveRelaysTitlebarButton.tsx index 7bff047e..6741c0b8 100644 --- a/src/components/ConnectedRelays/ActiveRelaysTitlebarButton.tsx +++ b/src/components/ConnectedRelays/ActiveRelaysTitlebarButton.tsx @@ -19,9 +19,25 @@ import { useState } from 'react' import { useTranslation } from 'react-i18next' import RelayIcon from '../RelayIcon' +function rowMuted(connected: boolean, sessionStriked: boolean) { + return !connected || sessionStriked +} + +function rowTitle( + url: string, + connected: boolean, + sessionStriked: boolean, + t: (k: string) => string +) { + const base = simplifyUrl(url) + if (sessionStriked) return `${base} — ${t('Relay session striked')}` + if (!connected) return `${base} — ${t('Not connected')}` + return base +} + /** * Same interaction pattern as {@link SeenOnButton}: Server + counts, menu lists relays with {@link RelayIcon}. - * Shows favorites + default/inbox relays; disconnected sockets are muted. + * Shows favorites + default/inbox relays; disconnected or session-striked relays are muted. */ export function ActiveRelaysTitlebarButton() { const { t } = useTranslation() @@ -52,8 +68,8 @@ export function ActiveRelaysTitlebarButton() { ) - const rowClass = (connected: boolean) => - cn(!connected && 'opacity-45 text-muted-foreground') + const rowClass = (connected: boolean, sessionStriked: boolean) => + cn(rowMuted(connected, sessionStriked) && 'opacity-45 text-muted-foreground') if (isSmallScreen) { return ( @@ -70,12 +86,12 @@ export function ActiveRelaysTitlebarButton() { {t('Active relays')}
- {rows.map(({ url, connected }) => ( + {rows.map(({ url, connected, sessionStriked }) => (