feat(collection-confirm): show signed-in-as pill in the page header

This commit is contained in:
SJCoetz 2026-07-10 01:02:59 +02:00
parent 6074e79be0
commit 9ab4be2666

View file

@ -106,10 +106,16 @@ function categoryLabel(category: NoteEntry["category"]): string {
export default function CollectionConfirmPage() {
const [rows, setRows] = useState<ConfirmRow[] | null>(null);
// Start with no actor identity so confirm-note entries are never stamped
// with a placeholder id. `localStorage.wfdash.actor` hydrates this on
// mount; if nothing is cached we leave id/name empty until sign-in.
// Actor identity is hydrated from the `wfdash_dev_email` cookie
// (see src/lib/dev-identity.ts) by the effect below. Starts empty so
// we never stamp confirm-note entries with a placeholder id before
// the cookie has been read.
const [actor, setActor] = useState<ConfirmActor>({ id: "", name: "" });
// Display name for the header pill. Mirrors the dev-identity
// switcher's `shortName` helper. Kept in state (rather than
// recomputed on every render) so the pill is stable across
// re-renders triggered by the row data.
const [displayName, setDisplayName] = useState<string>("");
const [busyId, setBusyId] = useState<string | null>(null);
const [confirmModal, setConfirmModal] = useState<{ row: ConfirmRow; bulkRows?: ConfirmRow[] } | null>(null);
const [returnModal, setReturnModal] = useState<ConfirmRow | null>(null);
@ -151,17 +157,12 @@ export default function CollectionConfirmPage() {
useEffect(() => {
if (typeof window === "undefined") return;
// The dev-identity switcher writes the active email to the
// `wfdash_dev_email` cookie. The earlier localStorage-based
// hydration never matched because nothing wrote to localStorage.
// getClientIdentity() returns the cookie value or the default
// (DEFAULT_DEV_EMAIL) when unset, so the actor is never empty
// for a signed-in operator.
const email = getClientIdentity();
if (!email) return;
const name = email.split("@")[0] || email;
// eslint-disable-next-line react-hooks/set-state-in-effect -- hydrate actor from dev-identity cookie on mount
setActor({ id: email, name });
setDisplayName(name);
}, []);
const persistRow = useCallback(
@ -381,9 +382,19 @@ export default function CollectionConfirmPage() {
Review collected order items, adjust quantity, add notes, and confirm for invoicing.
</p>
</div>
<Button variant="outline" size="sm" onClick={() => void load()}>
Refresh
</Button>
<div className="flex items-center gap-2">
<span
title={displayName}
aria-label={`Signed in as ${displayName}`}
className="inline-flex items-center gap-1.5 rounded-md border bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground"
>
<UserRound className="h-3 w-3" />
<span className="font-mono">{displayName || "—"}</span>
</span>
<Button variant="outline" size="sm" onClick={() => void load()}>
Refresh
</Button>
</div>
</header>
{rows === null && (