peter
5bfcf5d83a
The app HAS a platform layer -- AnchoredPopover (22 importers, with arrows/typeahead/Escape/anchor-flip), QueryState (21), Modal (17), PageShell, DataTable, Tabs, Tooltip and ~26 more -- but it sat flat among ~160 feature components with nothing marking it as one. Several of those files describe themselves as 'the one place' or 'canonical' and were still bypassed by hand-rolled markup, because a layer nobody can see is a layer nobody uses; three separate inventory passes of this codebase misread it the same way. Moves the 33 domain-free modules into components/ui/, rewrites the imports in 89 files, and makes the boundary a lint rule rather than a convention: inside ui/ a one-level-up import (a feature component) and any lib/api slice are errors. The rule was verified to fire on both and to leave generic lib/ helpers alone. README.md states which side of the line a component belongs on and why. No behaviour change: 3x tsc, eslint, knip, prettier and 687 vitest tests all green; no backend file touched.
66 lines
2.7 KiB
TypeScript
66 lines
2.7 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { CheckCircle2, AlertTriangle } from "lucide-react";
|
|
import Banner from "./ui/Banner";
|
|
import type { VerifyEntry } from "../lib/useVerifyEntry";
|
|
|
|
// The top-of-app outcome of an emailed verification link opened in a browser that ALREADY holds a
|
|
// session. That case used to be silent: the token was only ever consumed inside Welcome.tsx, which a
|
|
// signed-in visit never reaches, so the link opened a tab, the fragment was stripped, and nothing
|
|
// happened. Signed OUT, the same outcome is rendered by the auth card's own banners instead — this
|
|
// bar is only for the signed-in half.
|
|
//
|
|
// No "send a new link" action here, unlike the auth card: this viewer is signed in, so the sign-in
|
|
// screen (where resending lives) is not where they are, and the message is a report, not a task. A
|
|
// wrong-account case is why the address is named.
|
|
export default function VerifyBanner({ entry }: { entry: VerifyEntry }) {
|
|
const { t } = useTranslation();
|
|
// A reset link opened here can only be ACTED on signed out, so say that rather than nothing —
|
|
// silence is precisely what made the verify half a bug. The token stays in the address bar, so
|
|
// signing out from this same tab picks it up.
|
|
//
|
|
// Tested on `resetPending` ALONE, not `!outcome && resetPending`. The two can both be set (a
|
|
// reset link pasted over an unread confirmation, or a slow verify resolving after one), and this
|
|
// one goes first because it is the banner with something to DO. `dismiss` then peels it and the
|
|
// outcome shows underneath — where `!outcome &&` would have hidden this one until the other was
|
|
// dismissed, and dismissing that used to clear both.
|
|
if (entry.resetPending) {
|
|
return (
|
|
<Banner
|
|
tone="warning"
|
|
icon={AlertTriangle}
|
|
role="status"
|
|
onDismiss={entry.dismiss}
|
|
dismissTitle={t("header.banner.dismiss")}
|
|
>
|
|
{t("header.verify.resetSignedOut")}
|
|
</Banner>
|
|
);
|
|
}
|
|
if (!entry.outcome) return null;
|
|
|
|
const ok = entry.outcome === "ok" || entry.outcome === "ok_reset";
|
|
const text =
|
|
entry.outcome === "invalid"
|
|
? t("header.verify.invalid")
|
|
: entry.outcome === "unreachable"
|
|
? t("header.verify.unreachable")
|
|
: entry.email
|
|
? t("header.verify.confirmedNamed", { email: entry.email })
|
|
: t("header.verify.confirmed");
|
|
|
|
return (
|
|
<Banner
|
|
tone={ok ? "accent" : "warning"}
|
|
icon={ok ? CheckCircle2 : AlertTriangle}
|
|
role="status"
|
|
onDismiss={entry.dismiss}
|
|
dismissTitle={t("header.banner.dismiss")}
|
|
>
|
|
{text}
|
|
{entry.outcome === "ok_reset" && (
|
|
<span className="text-muted"> {t("header.verify.reset")}</span>
|
|
)}
|
|
</Banner>
|
|
);
|
|
}
|