@the-portland-company/shell 0.16.4 → 0.16.5

package/dist/native.cjs

@@ -1225,8 +1225,11 @@ function NavTopBar({
   actions,
   themeToggle
 }) {
-  const initials = (user?.name ?? "Politogy").slice(0, 2).toUpperCase();
-  const secondary = user?.email || [user?.tier, user?.role].filter(Boolean).join(" \xB7 ") || "member";
+  const rawName = user?.name?.trim() || "";
+  const hasRealName = rawName.length > 0 && !rawName.includes("@");
+  const displayName = hasRealName ? formatFirstLast(rawName) : user?.email ?? "Signed in";
+  const initials = (hasRealName ? rawName : user?.email ?? "P").slice(0, 2).toUpperCase();
+  const secondary = hasRealName ? user?.email || [user?.tier, user?.role].filter(Boolean).join(" \xB7 ") || "member" : [user?.tier, user?.role].filter(Boolean).join(" \xB7 ") || "member";
   return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-20 flex h-20 items-center justify-between gap-4 border-b border-[color:var(--line)] bg-[color:var(--panel)] px-4 backdrop-blur-xl", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1239,7 +1242,7 @@ function NavTopBar({
       ),
       subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm text-[color:var(--muted)]", children: subtitle }) : null
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-[var(--topbar-icon-gap,8px)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex shrink-0 items-center gap-[var(--topbar-icon-gap,8px)]", children: [
       actionsList && actionsList.length > 0 ? actionsList.map((action) => /* @__PURE__ */ jsxRuntime.jsx(NavTopBarActionButton, { action }, action.key)) : null,
       actions,
       themeToggle,
@@ -1254,7 +1257,7 @@ function NavTopBar({
             }
           ) : initials }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "hidden flex-col leading-tight md:flex", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: user?.name ?? "Signed in" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: displayName }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[color:var(--muted)]", children: secondary })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {}),
@@ -1263,7 +1266,7 @@ function NavTopBar({
             {
               title: "My Account",
               description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                user?.name ?? "Signed in",
+                hasRealName ? rawName : user?.email ?? "Signed in",
                 user?.email ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx("br", {}),
                   user.email
@@ -1391,10 +1394,64 @@ function NavTopBar({
             }
           ) : null
         ] })
-      ] })
+      ] }),
+      !hasRealName && user ? /* @__PURE__ */ jsxRuntime.jsx(NamePromptBubble, { profileHref: userMenu?.myProfileHref }) : null
     ] })
   ] });
 }
+function NamePromptBubble({ profileHref }) {
+  const KEY = "politogy_name_prompt_dismissed";
+  const [dismissed, setDismissed] = react.useState(true);
+  react.useEffect(() => {
+    try {
+      setDismissed(sessionStorage.getItem(KEY) === "1");
+    } catch {
+      setDismissed(false);
+    }
+  }, []);
+  if (dismissed) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-4 top-full z-30 mt-2 w-64 rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] p-3 shadow-[var(--shadow-soft)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "absolute -top-[5px] right-[11px] h-2.5 w-2.5 rotate-45 border-l border-t border-[color:var(--line)] bg-[color:var(--panel-elevated)]"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: "Add your name" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs leading-snug text-[color:var(--muted)]", children: "Set your first and last name so teammates see you \u2014 not your email." }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+      profileHref ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: safeHref(profileHref),
+          className: "rounded-full bg-[color:var(--color-race-red)] px-3 py-1 text-xs font-semibold text-white hover:opacity-90",
+          children: "Set name"
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setDismissed(true);
+            try {
+              sessionStorage.setItem(KEY, "1");
+            } catch {
+            }
+          },
+          className: "rounded-full border border-[color:var(--line)] px-3 py-1 text-xs font-semibold text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
+          children: "Dismiss"
+        }
+      )
+    ] })
+  ] });
+}
+function formatFirstLast(name) {
+  const parts = name.split(/\s+/).filter(Boolean);
+  if (parts.length === 1) return parts[0];
+  return `${parts[0]} ${parts[parts.length - 1][0].toUpperCase()}.`;
+}
 function ProfileIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),