@the-portland-company/shell 0.36.3 → 0.37.1

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+## 0.37.1 — 2026-07-27
+
+### Fixed — cross-app navigation kept the user's active organization
+
+Every link the Relationship tree emitted was bare: `Forms` / `Surveys` / `Polls`
+went to their standalone apps, and every core route went to `app.politogyvrm.com`,
+with no `?org=` selector. A multi-org user working in one organization clicked a
+feature and landed in whichever organization the destination resolved by default
+(reported: working in "We Need Steve", clicked Contacts, arrived in another org's
+contacts). Intra-app links already carried the selector, so the jump only
+happened when crossing apps.
+
+`standardPolitogyNav` now stamps `?org=<full-uuid>` on EVERY link it builds, in
+every tree — the Campaign and Petition trees already did. The full UUID is the
+only collision-free selector (contacts-api matches exact id first, then a short
+suffix that can collide across a user's orgs), and `isNavItemActive` already
+excludes `org` from active-detection, so nothing changes about which row is
+selected. The app-owned `contactsItem` override is still used verbatim; the
+`politogy_active_org` cookie remains the fallback for a bare URL.
+
+The same treatment applies to the chrome's own cross-app links — "Buy More Fuel"
+/ "Add fuel" and "View all" quarantined contacts, which all point into VRM core.
+
+## 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,16 @@ 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 withOrgParam(url, orgId) {
+  if (!orgId) return url;
+  return `${url}${url.includes("?") ? "&" : "?"}org=${orgId}`;
+}
+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 [
@@ -498,7 +508,7 @@ function FuelRow({
     ) })
   ] });
 }
-function LowFuelHint({ lowFuel }) {
+function LowFuelHint({ lowFuel, orgId }) {
   const [dismissed, setDismissed] = react.useState(() => {
     if (typeof window === "undefined") return false;
     try {
@@ -542,7 +552,7 @@ function LowFuelHint({ lowFuel }) {
             /* @__PURE__ */ jsxRuntime.jsx(
               "a",
               {
-                href: CORE_BILLING_URL,
+                href: withOrgParam(CORE_BILLING_URL, orgId),
                 className: "mt-1 inline-block text-sm font-bold underline hover:opacity-90",
                 children: "Buy More Fuel"
               }
@@ -609,7 +619,7 @@ function FuelAction({ orgId }) {
                   label: "SMS Signal",
                   channel: fuel?.signal ?? null,
                   loading,
-                  addHref: CORE_BILLING_URL,
+                  addHref: withOrgParam(CORE_BILLING_URL, orgId),
                   addLabel: "Add SMS Signal fuel"
                 }
               ),
@@ -619,7 +629,7 @@ function FuelAction({ orgId }) {
                   label: "Email Broadcast",
                   channel: fuel?.broadcast ?? null,
                   loading,
-                  addHref: CORE_BILLING_URL,
+                  addHref: withOrgParam(CORE_BILLING_URL, orgId),
                   addLabel: "Add Email Broadcast fuel"
                 }
               )
@@ -627,7 +637,7 @@ function FuelAction({ orgId }) {
           ] })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(LowFuelHint, { lowFuel: low })
+      /* @__PURE__ */ jsxRuntime.jsx(LowFuelHint, { lowFuel: low, orgId })
     ] })
   );
 }
@@ -922,7 +932,7 @@ function NotificationsAction({ orgId }) {
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "a",
                     {
-                      href: QUARANTINED_CONTACTS_URL,
+                      href: withOrgParam(QUARANTINED_CONTACTS_URL, orgId),
                       className: "text-[11px] font-semibold text-[color:var(--color-race-red)] hover:underline",
                       children: "View all"
                     }
@@ -1390,15 +1400,15 @@ function standardPolitogyNav(opts) {
   const base = opts.coreBaseUrl.replace(/\/+$/, "");
   const abs = (path) => `${base}${path.startsWith("/") ? path : `/${path}`}`;
   const icon = (key) => opts.icons?.[key];
-  const leaves = (children) => children.map((c) => ({ label: c.label, icon: icon(c.icon), href: abs(c.path) }));
+  const orgParam = opts.activeOrgId ? `org=${opts.activeOrgId}` : "";
+  const withOrg = (url) => orgParam ? `${url}${url.includes("?") ? "&" : "?"}${orgParam}` : url;
+  const leaves = (children) => children.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(abs(c.path)) }));
   const branches = (children) => children.map((c) => ({
     label: c.label,
     icon: icon(c.icon),
-    href: abs(c.path),
+    href: withOrg(abs(c.path)),
     children: c.children ? leaves(c.children) : void 0
   }));
-  const orgParam = opts.activeOrgId ? `org=${opts.activeOrgId}` : "";
-  const withOrg = (url) => orgParam ? `${url}${url.includes("?") ? "&" : "?"}${orgParam}` : url;
   const buildRelationship = () => {
     const contacts = opts.contactsItem ? {
       label: "Contacts",
@@ -1408,22 +1418,22 @@ function standardPolitogyNav(opts) {
     } : {
       label: "Contacts",
       icon: icon("users"),
-      href: abs("/relationship/contacts/dashboard"),
+      href: withOrg(abs("/relationship/contacts/dashboard")),
       children: leaves(CONTACTS_DEFAULT_CHILDREN)
     };
     return [
-      { label: "Dashboard", icon: icon("home"), href: abs("/relationship/dashboard") },
+      { label: "Dashboard", icon: icon("home"), href: withOrg(abs("/relationship/dashboard")) },
       contacts,
       {
         label: "Email Broadcast",
         icon: icon("mail"),
-        href: abs("/relationship/email/dashboard"),
+        href: withOrg(abs("/relationship/email/dashboard")),
         children: leaves(EMAIL_CHILDREN)
       },
       {
         label: "SMS/MMS Blast",
         icon: icon("messageSquare"),
-        href: abs("/relationship/sms-mms-blast/dashboard"),
+        href: withOrg(abs("/relationship/sms-mms-blast/dashboard")),
         children: leaves(SMS_CHILDREN)
       },
       // These two carry no top-level href in VRM core (parent row only toggles).
@@ -1431,25 +1441,25 @@ function standardPolitogyNav(opts) {
       {
         label: "Forms",
         icon: icon("activity"),
-        href: "https://forms.politogyvrm.com/",
-        children: APP_FORMS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: c.href }))
+        href: withOrg("https://forms.politogyvrm.com/"),
+        children: APP_FORMS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) }))
       },
       {
         label: "Surveys",
         icon: icon("fileText"),
-        href: "https://surveys.politogyvrm.com/surveys",
-        children: APP_SURVEYS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: c.href }))
+        href: withOrg("https://surveys.politogyvrm.com/surveys"),
+        children: APP_SURVEYS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) }))
       },
       {
         label: "Polls",
         icon: icon("barChart"),
-        href: "https://polls.politogyvrm.com/",
-        children: APP_POLLS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: c.href }))
+        href: withOrg("https://polls.politogyvrm.com/"),
+        children: APP_POLLS_CHILDREN.map((c) => ({ label: c.label, icon: icon(c.icon), href: withOrg(c.href) }))
       },
       {
         label: "Organization Settings",
         icon: icon("briefcase"),
-        href: abs("/organization-settings"),
+        href: withOrg(abs("/organization-settings")),
         children: branches(ORG_SETTINGS_CHILDREN)
       }
     ];
@@ -1588,6 +1598,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 +1666,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 +1701,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 +1730,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 +2553,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 +3005,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 +3015,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 +3068,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 {