Function IntegrationList

packages/app/src/web/shell.tsx:101–151

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

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

function IntegrationList(props: { pathname: string; onNavigate?: () => void }) {
  const integrations = useAtomValue(integrationsOptimisticAtom);
  const integrationPlugins = useIntegrationPlugins();

  return AsyncResult.match(integrations, {
    onInitial: () => <div className="px-2.5 py-2 text-xs text-muted-foreground">Loading…</div>,
    onFailure: () => (
      <div className="px-2.5 py-2 text-xs text-muted-foreground">No integrations yet</div>
    ),
    onSuccess: ({ value }: { readonly value: readonly Integration[] }) =>
      value.length === 0 ? (
        <div className="px-2.5 py-2 text-sm leading-relaxed text-muted-foreground">
          No integrations yet
        </div>
      ) : (
        <div className="flex flex-col gap-px">
          {value.map((integration: Integration) => {
            const slug = String(integration.slug);
            const name = integration.name || slug;
            const detailPath = `/integrations/${slug}`;
            const active =
              props.pathname === detailPath || props.pathname.startsWith(`${detailPath}/`);
            return (
              <Link
                key={slug}
                to="/{-$orgSlug}/integrations/$namespace"
                params={{ namespace: slug }}
                onClick={props.onNavigate}
                className={[
                  "group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs transition-colors",
                  active
                    ? "bg-sidebar-active text-foreground font-medium"
                    : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
                ].join(" ")}
              >
                <IntegrationIconWithAccount
                  icon={integrationPresetIconUrl(
                    { id: slug, kind: integration.kind },
                    integrationPlugins,
                  )}
                  integrationId={slug}
                  size="sm"
                />
                <span className="flex-1 truncate">{name}</span>
              </Link>
            );
          })}
        </div>
      ),
  });
}

// ── SidebarContent ───────────────────────────────────────────────────────