[Init] Initial commit - NetMesh terminal manager

components/sync/SyncBlockedBanner.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+import type { ShrinkFinding } from '../../domain/syncGuards';
+import { Button } from '../ui/button';
+import { useI18n } from '../../application/i18n/I18nProvider';
+
+interface Props {
+  finding: Extract<ShrinkFinding, { suspicious: true }>;
+  onRestore: () => void;
+  onForcePush: () => void;
+}
+
+export const SyncBlockedBanner: React.FC<Props> = ({ finding, onRestore, onForcePush }) => {
+  const { t } = useI18n();
+  const entityLabel = t(`sync.entityType.${finding.entityType}`);
+  const percent = finding.baseCount > 0 ? Math.round((finding.lost / finding.baseCount) * 100) : 0;
+
+  const reasonText = finding.reason === 'bulk-shrink'
+    ? t('sync.blocked.reason.bulkShrink', {
+        lost: finding.lost,
+        baseCount: finding.baseCount,
+        entityType: entityLabel,
+        percent,
+      })
+    : t('sync.blocked.reason.largeShrink', {
+        lost: finding.lost,
+        entityType: entityLabel,
+      });
+
+  return (
+    <div
+      role="alert"
+      className="flex flex-col gap-2 rounded-md border border-amber-500/40 bg-amber-500/10 p-4"
+    >
+      <div className="flex items-center gap-2 font-semibold">
+        <AlertTriangle className="h-4 w-4 text-amber-500" />
+        <span>{t('sync.blocked.title')}</span>
+      </div>
+      <p className="text-sm">{reasonText}</p>
+      <p className="text-xs opacity-70">{t('sync.blocked.detail')}</p>
+      <div className="flex gap-2">
+        <Button variant="default" size="sm" onClick={onRestore}>
+          {t('sync.blocked.restoreButton')}
+        </Button>
+        <Button variant="outline" size="sm" onClick={onForcePush}>
+          {t('sync.blocked.forcePushButton')}
+        </Button>
+      </div>
+    </div>
+  );
+};