Function ToolkitGrid

packages/plugins/toolkits/src/page.tsx:664–707

(props: {
  toolkits: readonly ToolkitResponse[];
  onCreate: (input: { owner: Owner; name: string }) => Promise<void>;
})

}

function ToolkitGrid(props: {
  toolkits: readonly ToolkitResponse[];
  onCreate: (input: { owner: Owner; name: string }) => Promise<void>;
}) {
  const ownerDisplay = useOwnerDisplay();
  // Toolkit shelves are grouped by owner; the selected toolkit owns the page.
  const workspaceToolkits = props.toolkits.filter((toolkit) => toolkit.owner === "org");
  const personalToolkits = props.toolkits.filter((toolkit) => toolkit.owner === "user");
  if (!ownerDisplay.showOwnerLabels) {
    return (
      <div className="min-h-0 flex-1 overflow-y-auto">
        <div className="w-full space-y-7 px-4 py-4" style={toolkitGridContainerStyle}>
          <ToolkitSection
            owner="org"
            showOwnerLabels={false}
            toolkits={props.toolkits}
            onCreate={props.onCreate}
          />
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-0 flex-1 overflow-y-auto">
      <div className="w-full space-y-7 px-4 py-4" style={toolkitGridContainerStyle}>
        <ToolkitSection
          owner="org"
          showOwnerLabels
          title="Workspace"
          toolkits={workspaceToolkits}
          onCreate={props.onCreate}
        />
        <ToolkitSection
          owner="user"
          showOwnerLabels
          title="Personal"
          toolkits={personalToolkits}
          onCreate={props.onCreate}
        />
      </div>
    </div>
  );
}

function ToolkitContentsEmpty(props: { onManageConnections: () => void }) {
  return (