From 9ab4be26663b4314518a1aba61e2024d46e65ba4 Mon Sep 17 00:00:00 2001
From: SJCoetz <s.coetzee6@my.milpark.ac.za>
Date: Fri, 10 Jul 2026 01:02:59 +0200
Subject: [PATCH] feat(collection-confirm): show signed-in-as pill in the page
 header

---
 src/app/(app)/collection-confirm/page.tsx | 35 +++++++++++++++--------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/app/(app)/collection-confirm/page.tsx b/src/app/(app)/collection-confirm/page.tsx
index 2ad804c..cfbfa1c 100644
--- a/src/app/(app)/collection-confirm/page.tsx
+++ b/src/app/(app)/collection-confirm/page.tsx
@@ -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 && (