Function PluginNav

packages/app/src/web/shell.tsx:59–97

(props: { pathname: string; onNavigate?: () => void })

// slash stripped.

function PluginNav(props: { pathname: string; onNavigate?: () => void }) {
  const plugins = useClientPlugins();
  const entries = plugins.flatMap((plugin) =>
    (plugin.pages ?? [])
      .filter((page) => page.nav)
      .map((page) => {
        const splat = page.path.replace(/^\//, "");
        const href = `/plugins/${plugin.id}${splat ? `/${splat}` : "/"}`;
        return {
          key: `${plugin.id}:${page.path}`,
          pluginId: plugin.id,
          splat,
          href,
          label: page.nav!.label,
        };
      }),
  );
  if (entries.length === 0) return null;
  return (
    <>
      {entries.map((entry) => (
        <Link
          key={entry.key}
          to="/{-$orgSlug}/plugins/$pluginId/$"
          params={{ pluginId: entry.pluginId, _splat: entry.splat }}
          onClick={props.onNavigate}
          className={[
            "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
            props.pathname === entry.href || props.pathname.startsWith(`${entry.href}/`)
              ? "bg-sidebar-active text-foreground font-medium"
              : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
          ].join(" ")}
        >
          {entry.label}
        </Link>
      ))}
    </>
  );
}

// ── IntegrationList ───────────────────────────────────────────────────────────