69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import { Activity, RefreshCw } from 'lucide-react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useTranslation } from '@/contexts/language';
|
|
import { useRelayDivergence } from '@/hooks/useRelayDivergence';
|
|
|
|
/**
|
|
* Settings diagnostic: compare the community relay with the user's read relays.
|
|
* No merge, no vote, no data mutation.
|
|
*/
|
|
export function RelayDivergenceCard() {
|
|
const { t } = useTranslation();
|
|
const { result, checking, error, check } = useRelayDivergence();
|
|
|
|
const differences = result?.differences.length ?? 0;
|
|
|
|
return (
|
|
<Card className="bg-black/90 border-white/10">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="flex items-center gap-2 text-sm font-bold text-white">
|
|
<Activity className="h-4 w-4 text-[#ccff00]" />
|
|
{t('settingsUi.relayList.relayDiagTitle')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<p className="text-xs leading-relaxed text-gray-400">
|
|
{t('settingsUi.relayList.relayDiagDesc')}
|
|
</p>
|
|
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => void check()}
|
|
disabled={checking}
|
|
className="gap-1.5"
|
|
>
|
|
<RefreshCw className={checking ? 'h-3.5 w-3.5 animate-spin' : 'h-3.5 w-3.5'} />
|
|
{checking
|
|
? t('settingsUi.relayList.relayDiagChecking')
|
|
: t('settingsUi.relayList.relayDiagCheck')}
|
|
</Button>
|
|
|
|
{error && (
|
|
<p className="text-xs text-red-400">
|
|
{t('settingsUi.relayList.relayDiagFailed')}
|
|
</p>
|
|
)}
|
|
|
|
{result && !error && (
|
|
<div className="space-y-1 text-xs">
|
|
<p className={differences > 0 ? 'font-bold text-amber-300' : 'text-green-400'}>
|
|
{differences > 0
|
|
? t('settingsUi.relayList.relayDiagDiff', { count: differences })
|
|
: t('settingsUi.relayList.relayDiagAgree')}
|
|
</p>
|
|
{differences > 0 && (
|
|
<p className="text-gray-500">{t('settingsUi.relayList.relayDiagDetails')}</p>
|
|
)}
|
|
{result.errors.length > 0 && (
|
|
<p className="text-gray-500">
|
|
{result.errors.length} {t('settingsUi.relayList.offline')}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|