@the-portland-company/shell 0.36.3 → 0.37.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 0.37.0 — 2026-07-27
+
+### Fixed — organization logo renders in every app, not just VRM core
+
+`organizations.logo_url` is authored by VRM core and stored as a ROOT-RELATIVE
+core route (`/api/storage/public?bucket=organization-logos&path=<org>/logo.png`
+— core's signed-storage proxy). VRM core rendered it fine because the path
+resolved against its own origin; every feature app resolved the same path
+against ITS origin (`forms.politogyvrm.com/api/storage/public`), 404'd, and
+showed a broken image in the sidebar org pill and the org dropdown.
+
+`resolveOrgLogoUrl` (exported from `./native`) now absolutizes a relative logo
+path against `CORE_APP_ORIGIN` at the point of render, for all three org-badge
+sites (active pill, dropdown rows, non-switcher pill). Absolute, protocol-
+relative and `data:` URLs pass through untouched; empty values still fall back
+to initials. This is the same treatment `absolutizeAvatarUrl` already applied to
+`profiles.avatar_url` in the chrome API — the org logo was simply missed.
+
 ## 0.36.0 — 2026-07-24
 
 ### Added — cross-subdomain active-org + favicon cache-busting

package/dist/app-chrome.cjs

@@ -150,6 +150,12 @@ var CORE_APP_ORIGIN = "https://app.politogyvrm.com";
 var CORE_BILLING_PATH = "/organization-settings/subscription-billing/text-email";
 var CORE_BILLING_URL = `${CORE_APP_ORIGIN}${CORE_BILLING_PATH}`;
 var QUARANTINED_CONTACTS_URL = `${CORE_APP_ORIGIN}/relationship/contacts/quarantined`;
+function resolveOrgLogoUrl(url) {
+  const raw = url?.trim();
+  if (!raw) return void 0;
+  if (/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(raw)) return raw;
+  return `${CORE_APP_ORIGIN}${raw.startsWith("/") ? "" : "/"}${raw}`;
+}
 function topBarIconButtonClass(tone = "default") {
   const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--color-race-red)] hover:text-[color:var(--color-race-red)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
   return [
@@ -1588,6 +1594,7 @@ function NavSidebar({
   const activeFn = nav.isActive ?? isNavItemActive;
   const ModeIcon = mode?.icon;
   const orgBg = org?.brandColor || ORG_PILL_DEFAULT;
+  const orgLogoSrc = resolveOrgLogoUrl(org?.logoUrl);
   const activeGroupKey = react.useMemo(() => {
     for (let i = 0; i < nav.items.length; i++) {
       const item = nav.items[i];
@@ -1655,7 +1662,7 @@ function NavSidebar({
                 {
                   style: { backgroundColor: orgBg },
                   className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full text-[11px] font-bold text-white",
-                  children: org.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: org.logoUrl, alt: "", className: "h-full w-full object-cover" }) : (org.name ?? "Org").slice(0, 2).toUpperCase()
+                  children: orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "h-full w-full object-cover" }) : (org.name ?? "Org").slice(0, 2).toUpperCase()
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1690,7 +1697,14 @@ function NavSidebar({
                     {
                       style: { backgroundColor: o.brandColor || ORG_PILL_DEFAULT },
                       className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-full text-[10px] font-bold text-white",
-                      children: o.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: o.logoUrl, alt: "", className: "h-full w-full object-cover" }) : (o.name ?? "Org").slice(0, 2).toUpperCase()
+                      children: resolveOrgLogoUrl(o.logoUrl) ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "img",
+                        {
+                          src: resolveOrgLogoUrl(o.logoUrl),
+                          alt: "",
+                          className: "h-full w-full object-cover"
+                        }
+                      ) : (o.name ?? "Org").slice(0, 2).toUpperCase()
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { title: o.name ?? o.id, className: "truncate", children: o.name ?? o.id.slice(0, 8) })
@@ -1712,7 +1726,7 @@ function NavSidebar({
                   {
                     style: { backgroundColor: orgBg },
                     className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full text-[11px] font-bold text-white",
-                    children: org.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: org.logoUrl, alt: "", className: "h-full w-full object-cover" }) : (org.name ?? "Org").slice(0, 2).toUpperCase()
+                    children: orgLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: orgLogoSrc, alt: "", className: "h-full w-full object-cover" }) : (org.name ?? "Org").slice(0, 2).toUpperCase()
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold", children: org.name ?? "No organizations" })
@@ -2535,6 +2549,66 @@ function resolveActiveOrg(search) {
   return readActiveOrgCookie();
 }
 
+// src/nav-preference.ts
+var NAV_DISPLAY_STORAGE_KEY = "politogy_nav_display";
+var NAV_DISPLAY_COOKIE = "politogy_nav_display";
+var LEGACY_NAV_DISPLAY_KEY = "vrm.navDisplay";
+var NAV_DISPLAY_DEFAULT = "both";
+var VALID2 = ["menu", "tabs", "both"];
+function isNavDisplayPreference(v) {
+  return typeof v === "string" && VALID2.includes(v);
+}
+function readNavDisplayCookie() {
+  if (typeof document === "undefined") return null;
+  try {
+    const m = document.cookie.match(
+      new RegExp(`(?:^|;\\s*)${NAV_DISPLAY_COOKIE}=([^;]+)`)
+    );
+    const v = m ? decodeURIComponent(m[1]) : null;
+    return isNavDisplayPreference(v) ? v : null;
+  } catch {
+    return null;
+  }
+}
+function writeNavDisplayCookie(pref) {
+  if (typeof document === "undefined" || typeof window === "undefined") return;
+  const host = window.location.hostname;
+  const domainAttr = /(^|\.)politogyvrm\.com$/i.test(host) ? "; Domain=.politogyvrm.com" : "";
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${NAV_DISPLAY_COOKIE}=${encodeURIComponent(
+    pref
+  )}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`;
+}
+function readNavDisplayLocal() {
+  if (typeof localStorage === "undefined") return null;
+  try {
+    const current = localStorage.getItem(NAV_DISPLAY_STORAGE_KEY);
+    if (isNavDisplayPreference(current)) return current;
+    const legacy = localStorage.getItem(LEGACY_NAV_DISPLAY_KEY);
+    return isNavDisplayPreference(legacy) ? legacy : null;
+  } catch {
+    return null;
+  }
+}
+function writeNavDisplayLocal(pref) {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(NAV_DISPLAY_STORAGE_KEY, pref);
+  } catch {
+  }
+}
+function resolveNavDisplay() {
+  return readNavDisplayCookie() ?? readNavDisplayLocal() ?? NAV_DISPLAY_DEFAULT;
+}
+`(function(){try{
+var KEY=${JSON.stringify(NAV_DISPLAY_STORAGE_KEY)};
+var VALID=["menu","tabs","both"];
+function fromCookie(){try{var m=document.cookie.match(/(?:^|;\\s*)${NAV_DISPLAY_COOKIE}=([^;]+)/);return m?decodeURIComponent(m[1]):null;}catch(e){return null;}}
+var cookie=fromCookie();
+if(cookie&&VALID.indexOf(cookie)!==-1){var ls=null;try{ls=localStorage.getItem(KEY);}catch(e){}
+if(cookie!==ls){try{localStorage.setItem(KEY,cookie);}catch(e){}}}
+}catch(e){}})();`;
+
 // src/lib/breadcrumbs.ts
 function deriveBreadcrumbs(items, pathname, opts) {
   const search = opts?.search ?? (typeof window !== "undefined" ? window.location.search : "");
@@ -2927,7 +3001,6 @@ var standardNavIcons = {
 };
 var ORG_STORAGE_KEY = "vrm.activeOrg";
 var MODE_STORAGE_KEY = "vrm.activeMode";
-var NAV_DISPLAY_KEY = "vrm.navDisplay";
 var CORE_BASE_URL = "https://app.politogyvrm.com";
 var ChromeStateContext = react.createContext(null);
 function useChromeState() {
@@ -2938,18 +3011,46 @@ function ChromeStateProvider({
   children
 }) {
   const { orgs, loading: orgsFetching, error: orgsError } = useChromeOrgs();
+  const chromeMe = useChromeMe();
+  const chromeFetch = useNavChromeFetcher();
   const [orgId, setOrgIdState] = react.useState(null);
-  const [navDisplay, setNavDisplayState] = react.useState("both");
+  const [navDisplay, setNavDisplayState] = react.useState(NAV_DISPLAY_DEFAULT);
+  const navReconciled = react.useRef(false);
   react.useEffect(() => {
     try {
       const storedOrg = resolveActiveOrg() ?? localStorage.getItem(ORG_STORAGE_KEY);
       if (storedOrg) setOrgIdState(storedOrg);
-      const storedNav = localStorage.getItem(NAV_DISPLAY_KEY);
-      if (storedNav === "menu" || storedNav === "tabs" || storedNav === "both") {
-        setNavDisplayState(storedNav);
-      }
     } catch {
     }
+    setNavDisplayState(resolveNavDisplay());
+  }, []);
+  react.useEffect(() => {
+    if (navReconciled.current || !chromeMe.me) return;
+    const pref = chromeMe.me.navDisplay;
+    if (!isNavDisplayPreference(pref)) return;
+    navReconciled.current = true;
+    setNavDisplayState(pref);
+    writeNavDisplayCookie(pref);
+    writeNavDisplayLocal(pref);
+  }, [chromeMe]);
+  react.useEffect(() => {
+    const onStorage = (e) => {
+      if (e.key === NAV_DISPLAY_STORAGE_KEY && isNavDisplayPreference(e.newValue)) {
+        setNavDisplayState(e.newValue);
+      }
+    };
+    const onWake = () => {
+      const cookie = readNavDisplayCookie();
+      if (cookie) setNavDisplayState(cookie);
+    };
+    window.addEventListener("storage", onStorage);
+    window.addEventListener("focus", onWake);
+    document.addEventListener("visibilitychange", onWake);
+    return () => {
+      window.removeEventListener("storage", onStorage);
+      window.removeEventListener("focus", onWake);
+      document.removeEventListener("visibilitychange", onWake);
+    };
   }, []);
   react.useEffect(() => {
     if (!orgs || orgs.length === 0) return;
@@ -2963,13 +3064,20 @@ function ChromeStateProvider({
     }
     writeActiveOrgCookie(id);
   }, []);
-  const setNavDisplay = react.useCallback((m) => {
-    setNavDisplayState(m);
-    try {
-      localStorage.setItem(NAV_DISPLAY_KEY, m);
-    } catch {
-    }
-  }, []);
+  const setNavDisplay = react.useCallback(
+    (m) => {
+      setNavDisplayState(m);
+      writeNavDisplayLocal(m);
+      writeNavDisplayCookie(m);
+      chromeFetch?.("me/preferences", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ navDisplay: m })
+      })?.catch(() => {
+      });
+    },
+    [chromeFetch]
+  );
   const value = react.useMemo(() => {
     if (controlledOrg) {
       return {