@the-portland-company/shell 0.16.7 → 0.17.0

package/dist/index.cjs

@@ -1284,6 +1284,142 @@ function resolveModeConfig(mode) {
   }
   return modes.find((m) => m.id === mode.currentMode) ?? modes[0] ?? null;
 }
+
+// src/theme-preference.ts
+var THEME_STORAGE_KEY = "politogy_theme";
+var THEME_COOKIE = "politogy_theme";
+var VALID = ["light", "dark", "system"];
+function isThemePreference(v) {
+  return typeof v === "string" && VALID.includes(v);
+}
+function readThemeCookie() {
+  if (typeof document === "undefined") return null;
+  try {
+    const m = document.cookie.match(
+      new RegExp(`(?:^|;\\s*)${THEME_COOKIE}=([^;]+)`)
+    );
+    const v = m ? decodeURIComponent(m[1]) : null;
+    return isThemePreference(v) ? v : null;
+  } catch {
+    return null;
+  }
+}
+function writeThemeCookie(pref) {
+  if (typeof document === "undefined" || typeof window === "undefined") return;
+  const host = window.location.hostname;
+  const onParentDomain = /(^|\.)politogyvrm\.com$/i.test(host);
+  const domainAttr = onParentDomain ? "; Domain=.politogyvrm.com" : "";
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${THEME_COOKIE}=${encodeURIComponent(
+    pref
+  )}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`;
+}
+function resolveTheme(pref) {
+  if (pref === "system") {
+    try {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    } catch {
+      return "light";
+    }
+  }
+  return pref;
+}
+function applyThemePreference(pref) {
+  if (typeof document === "undefined") return;
+  const resolved = resolveTheme(pref);
+  const d = document.documentElement;
+  d.classList.toggle("dark", resolved === "dark");
+  try {
+    d.style.colorScheme = resolved;
+  } catch {
+  }
+}
+`(function(){try{
+var KEY=${JSON.stringify(THEME_STORAGE_KEY)};
+var VALID=["light","dark","system"];
+function fromCookie(){try{var m=document.cookie.match(/(?:^|;\\s*)${THEME_COOKIE}=([^;]+)/);return m?decodeURIComponent(m[1]):null;}catch(e){return null;}}
+var cookie=fromCookie();
+var ls=null;try{ls=localStorage.getItem(KEY);}catch(e){}
+var pref=cookie||ls||"system";
+if(VALID.indexOf(pref)===-1)pref="system";
+if(cookie&&cookie!==ls){try{localStorage.setItem(KEY,cookie);}catch(e){}}
+var resolved=pref;
+if(pref==="system"){try{resolved=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";}catch(e){resolved="light";}}
+var d=document.documentElement;
+if(resolved==="dark"){d.classList.add("dark");}else{d.classList.remove("dark");}
+try{d.style.colorScheme=resolved;}catch(e){}
+}catch(e){}})();`;
+function formatFirstLast(name) {
+  const parts = name.split(/\s+/).filter(Boolean);
+  if (parts.length <= 1) return name;
+  return `${parts[0]} ${parts[parts.length - 1][0].toUpperCase()}.`;
+}
+var THEME_OPTIONS = [
+  { value: "light", label: "Light" },
+  { value: "system", label: "System" },
+  { value: "dark", label: "Dark" }
+];
+function AppearanceControl() {
+  const [value, setValue] = react$1.useState("system");
+  react$1.useEffect(() => {
+    const cookie = readThemeCookie();
+    let ls = null;
+    try {
+      ls = localStorage.getItem(THEME_STORAGE_KEY);
+    } catch {
+    }
+    setValue(cookie ?? (isThemePreference(ls) ? ls : null) ?? "system");
+  }, []);
+  const pick = (next) => {
+    setValue(next);
+    writeThemeCookie(next);
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, next);
+    } catch {
+    }
+    applyThemePreference(next);
+    try {
+      window.dispatchEvent(
+        new CustomEvent("politogy:theme-preference", { detail: next })
+      );
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { px: 3, py: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", fontWeight: "semibold", mb: 2, children: "APPEARANCE" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.HStack,
+      {
+        spacing: 0,
+        borderWidth: "1px",
+        borderColor: "var(--line, #E2E8F0)",
+        borderRadius: "full",
+        overflow: "hidden",
+        children: THEME_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+          react.Box,
+          {
+            as: "button",
+            type: "button",
+            role: "radio",
+            "aria-checked": value === opt.value,
+            onClick: () => pick(opt.value),
+            flex: 1,
+            px: 3,
+            py: 1.5,
+            fontSize: "xs",
+            fontWeight: "semibold",
+            bg: value === opt.value ? "var(--color-race-red, #E63946)" : "transparent",
+            color: value === opt.value ? "white" : "gray.500",
+            _hover: value === opt.value ? {} : { bg: "var(--panel, #F7FAFC)" },
+            transition: "background 0.15s",
+            children: opt.label
+          },
+          opt.value
+        ))
+      }
+    )
+  ] });
+}
 function avatarUrlFromUser(user) {
   if (!user) return void 0;
   const meta = user.raw.user_metadata;
@@ -1306,7 +1442,9 @@ function UserMenu() {
   const menuListBg = "var(--topbar-bg, #FFFFFF)";
   const menuListBorderColor = react.useColorModeValue("gray.200", "gray.700");
   if (status !== "authenticated" || !user) return null;
-  const displayName = getUserDisplayName(user.raw);
+  const rawDisplayName = getUserDisplayName(user.raw);
+  const hasRealName = !!rawDisplayName && !rawDisplayName.includes("@");
+  const displayName = hasRealName ? formatFirstLast(rawDisplayName) : user.email ?? rawDisplayName;
   const avatarUrl = userAvatarUrl ?? avatarUrlFromUser(user);
   const modeConfig = resolveModeConfig(mode);
   const currentOrg = org?.currentOrg ?? null;
@@ -1332,7 +1470,7 @@ function UserMenu() {
           ml: "2",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { spacing: 2, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", children: displayName }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", children: user.email })
+            hasRealName ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", children: user.email }) : null
           ]
         }
       ),
@@ -1452,6 +1590,8 @@ function UserMenu() {
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.MenuDivider, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(AppearanceControl, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(react.MenuDivider, {}),
       /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(fi.FiLogOut, {}), onClick: () => void signOut(), children: "Sign out" })
     ] }) })
   ] }) });