Files
fusion/packages/dashboard/app/components/ApprovalNotificationBanner.tsx
gsxdsm 1e49494bac feat(i18n): full-sweep string migration — 5,930 keys across 5 locales (#1352)
Migration (multi-agent sweep over 216 files, 60 batches):
- Every user-visible dashboard + TUI string moved to t() with the exact
  English inline default (en rendering byte-identical)
- Catalogs merged from per-batch fragments: en/zh-CN/zh-TW/fr/es now
  carry ~5,930 keys each across common/app/errors/cli namespaces;
  CLI bundles regenerated (6 locales incl. ko)

Integration fixes:
- 18 type errors: reserved {{count}} interpolations renamed, malformed
  plural call, hand-rolled t-param types replaced with TFunction<"app">
- 23 lint errors: superseded label constants/helpers removed
- ExecutorStatusBar hook-order violation (keyboard-open early return
  moved below hooks)
- TUI tests wrapped in I18nextProvider (uninitialized fallback renders
  literal {{placeholders}}); dashboard vitest.setup boots a minimal en
  i18next instance for the same reason

Known WIP (next commits): ~457 residual strings across 50 batches,
Korean drafts for swept keys, and a dashboard test-suite pass that is
still being stabilized (~283 failures under investigation — fake-timer
waitFor interaction, likely stale node_modules vs merged lockfile).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-03 19:06:53 -07:00

40 lines
1.6 KiB
TypeScript

import { AlertTriangle, Inbox, X } from "lucide-react";
import { useTranslation } from "react-i18next";
import "./ApprovalNotificationBanner.css";
interface ApprovalNotificationBannerProps {
pendingCount: number;
onOpenMailbox: () => void;
onDismiss: () => void;
}
export function ApprovalNotificationBanner({
pendingCount,
onOpenMailbox,
onDismiss,
}: ApprovalNotificationBannerProps) {
const { t } = useTranslation("app");
const noun = pendingCount === 1 ? t("approval.requestSingular", "request") : t("approval.requestPlural", "requests");
return (
<section className="approval-notification-banner" role="region" aria-live="polite" aria-label={t("approval.requests", "Approval requests")}>
<div className="approval-notification-banner__content">
<div className="approval-notification-banner__headline">
<span className="status-dot" aria-hidden="true" />
<AlertTriangle aria-hidden="true" />
<span>{t("approval.needAttention", "{{count}} approval {{noun}} need your attention", { count: pendingCount, noun })}</span>
</div>
<div className="approval-notification-banner__actions">
<button type="button" className="btn btn-sm" onClick={onOpenMailbox}>
<Inbox aria-hidden="true" />
<span>{t("approval.openMailbox", "Open Mailbox")}</span>
</button>
<button type="button" className="btn-icon approval-notification-banner__dismiss" onClick={onDismiss} aria-label={t("approval.dismissBanner", "Dismiss approval notification banner")}>
<X aria-hidden="true" />
</button>
</div>
</div>
</section>
);
}