@the-portland-company/shell 0.16.4 → 0.16.6

package/dist/native.cjs

@@ -214,7 +214,25 @@ function NavChromeProvider({
   fetchJson,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(NavChromeContext.Provider, { value: { fetchJson }, children });
+  const [me, setMe] = react.useState(null);
+  const [meLoaded, setMeLoaded] = react.useState(false);
+  react.useEffect(() => {
+    let cancelled = false;
+    fetchJson("me").then((data) => {
+      if (!cancelled) setMe(data);
+    }).catch(() => {
+    }).finally(() => {
+      if (!cancelled) setMeLoaded(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchJson]);
+  return /* @__PURE__ */ jsxRuntime.jsx(NavChromeContext.Provider, { value: { fetchJson, me, meLoaded }, children });
+}
+function useChromeMe() {
+  const ctx = react.useContext(NavChromeContext);
+  return { me: ctx?.me ?? null, loaded: ctx?.meLoaded ?? false };
 }
 function useNavChrome(component) {
   const ctx = react.useContext(NavChromeContext);
@@ -677,23 +695,21 @@ function useThemePreference() {
     setValueState(pref);
     applyThemePreference(pref);
   }, []);
+  const meCtx = react.useContext(NavChromeContext);
   react.useEffect(() => {
-    if (!fetchJson || reconciled.current) return;
-    reconciled.current = true;
-    fetchJson("me").then((data) => {
-      const pref = data?.themePreference;
-      if (isThemePreference(pref)) {
-        setValueState(pref);
-        applyThemePreference(pref);
-        writeThemeCookie(pref);
-        try {
-          localStorage.setItem(THEME_STORAGE_KEY, pref);
-        } catch {
-        }
+    if (reconciled.current) return;
+    const pref = meCtx?.me?.themePreference;
+    if (isThemePreference(pref)) {
+      reconciled.current = true;
+      setValueState(pref);
+      applyThemePreference(pref);
+      writeThemeCookie(pref);
+      try {
+        localStorage.setItem(THEME_STORAGE_KEY, pref);
+      } catch {
       }
-    }).catch(() => {
-    });
-  }, [fetchJson]);
+    }
+  }, [meCtx?.me]);
   react.useEffect(() => {
     const onStorage = (e) => {
       if (e.key === THEME_STORAGE_KEY && isThemePreference(e.newValue)) {
@@ -1225,8 +1241,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 +1258,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 +1273,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 +1282,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 +1410,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" }),
@@ -1603,6 +1676,7 @@ exports.envChipClasses = envChipClasses;
 exports.isNavItemActive = isNavItemActive;
 exports.standardPolitogyNav = standardPolitogyNav;
 exports.topBarIconButtonClass = topBarIconButtonClass;
+exports.useChromeMe = useChromeMe;
 exports.useChromeOrgs = useChromeOrgs;
 exports.useThemePreference = useThemePreference;
 //# sourceMappingURL=native.cjs.map