feat(collection-confirm): show signed-in-as pill in the page header
This commit is contained in:
parent
6074e79be0
commit
9ab4be2666
1 changed files with 23 additions and 12 deletions
|
|
@ -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 && (
|
||||
|
|
|
|||
Loading…
Reference in a new issue