@the-portland-company/shell 0.50.1 → 0.51.0

package/dist/app-chrome.cjs

@@ -54,6 +54,20 @@ function resolveBrandGlyph(name) {
   return GLYPHS[name.trim().toLowerCase()] ?? null;
 }
 
+// src/native/orgFilter.ts
+var ORG_FILTER_THRESHOLD = 8;
+function filterOrgs(orgs, query) {
+  const q = normalize(query);
+  if (!q) return [...orgs];
+  return orgs.filter((o) => normalize(o.name ?? "").includes(q) || o.id.toLowerCase().startsWith(q));
+}
+function shouldShowOrgFilter(count) {
+  return count > ORG_FILTER_THRESHOLD;
+}
+function normalize(s) {
+  return s.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
+}
+
 // src/theme-preference.ts
 var THEME_STORAGE_KEY = "politogy_theme";
 var THEME_COOKIE = "politogy_theme";
@@ -1768,6 +1782,7 @@ function NavSidebar({
     return null;
   }, [nav.items, pathname, activeFn]);
   const [openGroup, setOpenGroup] = react.useState(activeGroupKey);
+  const [orgFilter, setOrgFilter] = react.useState("");
   react.useEffect(() => {
     setOpenGroup(activeGroupKey);
   }, [activeGroupKey]);
@@ -1839,43 +1854,69 @@ function NavSidebar({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 right-0 z-40 mt-1 max-h-72 overflow-y-auto rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: org.organizations.map((o) => {
-            const selected = o.id === org.id;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 right-0 z-40 mt-1 max-h-[min(60vh,520px)] overflow-y-auto rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: [
+            shouldShowOrgFilter(org.organizations.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-[color:var(--panel-elevated)] px-2 pb-1 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
               {
-                type: "button",
-                onClick: (e) => {
-                  e.currentTarget.closest("details")?.removeAttribute("open");
-                  if (!selected) org.onSwitch?.(o.id);
+                type: "search",
+                value: orgFilter,
+                onChange: (e) => setOrgFilter(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Escape") {
+                    setOrgFilter("");
+                    e.currentTarget.closest("details")?.removeAttribute("open");
+                  }
                 },
-                "aria-current": selected ? "true" : void 0,
-                className: [
-                  "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm",
-                  selected ? "font-semibold text-[color:var(--color-accent)]" : "font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
-                ].join(" "),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      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: 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) })
-                ]
-              },
-              o.id
-            );
-          }) })
+                placeholder: `Filter ${org.organizations.length} organizations`,
+                "aria-label": "Filter organizations",
+                autoComplete: "off",
+                className: "w-full rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-1.5 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-accent)]"
+              }
+            ) }) : null,
+            filterOrgs(org.organizations, orgFilter).length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "px-3 py-2 text-sm text-[color:var(--muted)]", children: [
+              "No organization matches \u201C",
+              orgFilter,
+              "\u201D."
+            ] }) : null,
+            filterOrgs(org.organizations, orgFilter).map((o) => {
+              const selected = o.id === org.id;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.currentTarget.closest("details")?.removeAttribute("open");
+                    setOrgFilter("");
+                    if (!selected) org.onSwitch?.(o.id);
+                  },
+                  "aria-current": selected ? "true" : void 0,
+                  className: [
+                    "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm",
+                    selected ? "font-semibold text-[color:var(--color-accent)]" : "font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        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: 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) })
+                  ]
+                },
+                o.id
+              );
+            })
+          ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {