zudoku 0.33.1 → 0.34.0

package/src/lib/plugins/openapi/OperationList.tsx

@@ -1,7 +1,13 @@
-import { ResultOf } from "@graphql-typed-document-node/core";
+import { type ResultOf } from "@graphql-typed-document-node/core";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { Helmet } from "@zudoku/react-helmet-async";
+import { ChevronsDownUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { useNavigate } from "react-router";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "zudoku/ui/Collapsible.js";
 import {
   Select,
   SelectContent,
@@ -31,6 +37,7 @@ export const OperationsFragment = graphql(/* GraphQL */ `
     operationId
     contentTypes
     path
+    deprecated
     parameters {
       name
       in
@@ -152,45 +159,90 @@ export const OperationList = ({
       ? sanitizeMarkdownForMetatag(description)
       : undefined;
 
+  const showVersions = Object.entries(versions).length > 1;
+
   return (
-    <div className="pt-[--padding-content-top]">
+    <div
+      className="pt-[--padding-content-top]"
+      data-pagefind-filter="section:openapi"
+      data-pagefind-meta="section:openapi"
+    >
       <Helmet>
         <title>{title}</title>
         {metaDescription && (
           <meta name="description" content={metaDescription} />
         )}
       </Helmet>
-      <div
-        className={cn(ProseClasses, "mb-16 max-w-full prose-img:max-w-prose")}
-      >
-        <div className="flex">
-          <div className="flex-1">
-            <CategoryHeading>Overview</CategoryHeading>
-            <Heading level={1} id="description" registerSidebarAnchor>
-              {title}
-            </Heading>
-          </div>
-          <div>
-            {Object.entries(versions).length > 1 && (
-              <Select
-                onValueChange={(version) => navigate(versions[version]!)}
-                defaultValue={version}
+      <div className="mb-8">
+        <Collapsible className="w-full">
+          <div className="flex flex-col gap-y-4 sm:flex-row justify-around items-start sm:items-end">
+            <div className="flex-1">
+              <CategoryHeading>{title}</CategoryHeading>
+              <Heading
+                level={1}
+                id="description"
+                registerSidebarAnchor
+                className="mb-0"
               >
-                <SelectTrigger className="w-[180px]">
-                  <SelectValue placeholder="Select version" />
-                </SelectTrigger>
-                <SelectContent>
-                  {Object.entries(versions).map(([version]) => (
-                    <SelectItem key={version} value={version}>
-                      {version}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            )}
+                {tag}
+                {showVersions && (
+                  <span className="text-xl text-muted-foreground ml-1.5">
+                    {" "}
+                    ({version})
+                  </span>
+                )}
+              </Heading>
+            </div>
+            <div className="flex flex-col gap-4 sm:items-end">
+              {showVersions && (
+                <Select
+                  onValueChange={(version) => navigate(versions[version]!)}
+                  defaultValue={version}
+                >
+                  <SelectTrigger className="w-[180px]">
+                    <SelectValue placeholder="Select version" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(versions).map(([version]) => (
+                      <SelectItem key={version} value={version}>
+                        {version}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+              {schema.description && (
+                <CollapsibleTrigger className="flex items-center gap-1 text-sm font-medium text-muted-foreground group">
+                  <span>Schema description</span>
+
+                  <ChevronsUpDownIcon
+                    className="group-data-[state=open]:hidden translate-y-px"
+                    size={14}
+                  />
+                  <ChevronsDownUpIcon
+                    className="group-data-[state=closed]:hidden translate-y-px"
+                    size={13}
+                  />
+                </CollapsibleTrigger>
+              )}
+            </div>
           </div>
-        </div>
-        <Markdown content={schema.description ?? ""} />
+          {schema.description && (
+            <CollapsibleContent className="CollapsibleContent">
+              <div
+                className={cn(
+                  ProseClasses,
+                  "pt-4 max-w-full prose-img:max-w-prose",
+                )}
+              >
+                <Markdown
+                  className="border rounded bg-muted/25 border-border px-2.5 md:px-4"
+                  content={schema.description}
+                />
+              </div>
+            </CollapsibleContent>
+          )}
+        </Collapsible>
       </div>
       <hr />
       <div className="my-4 flex items-center justify-end gap-4">

package/src/lib/plugins/openapi/OperationListItem.tsx

@@ -1,13 +1,16 @@
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useRef, useState } from "react";
+import { Badge } from "zudoku/ui/Badge.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown, ProseClasses } from "../../components/Markdown.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
+import { cn } from "../../util/cn.js";
 import { groupBy } from "../../util/groupBy.js";
 import { renderIf } from "../../util/renderIf.js";
 import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
 import { Sidecar } from "./Sidecar.js";
-import { FragmentType, useFragment } from "./graphql/index.js";
+import { type FragmentType, useFragment } from "./graphql/index.js";
 import { SchemaView } from "./schema/SchemaView.js";
 import { methodForColor } from "./util/methodToColor.js";
 
@@ -32,11 +35,19 @@ export const OperationListItem = ({
   const [selectedResponse, setSelectedResponse] = useState(first?.statusCode);
 
   return (
-    <div
-      key={operation.operationId}
-      className="grid grid-cols-1 lg:grid-cols-[minmax(0,4fr)_minmax(0,3fr)] gap-8 items-start border-b-2 mb-16 pb-16"
-    >
-      <div className="flex flex-col gap-4">
+    <div className="border-b-2 mb-16 pb-16">
+      {operation.deprecated && (
+        <Badge variant="muted" className="text-xs mb-4">
+          deprecated
+        </Badge>
+      )}
+      <div
+        key={operation.operationId}
+        className={cn(
+          "grid grid-cols-1 lg:grid-cols-[minmax(0,4fr)_minmax(0,3fr)] gap-x-8 gap-y-4 items-start",
+          operation.deprecated && "opacity-50 transition hover:opacity-100",
+        )}
+      >
         <Heading
           level={2}
           id={operation.slug}
@@ -45,7 +56,7 @@ export const OperationListItem = ({
         >
           {operation.summary}
         </Heading>
-        <div className="text-sm flex gap-2 font-mono">
+        <div className="text-sm flex gap-2 font-mono col-span-full">
           <span className={methodForColor(operation.method)}>
             {operation.method.toUpperCase()}
           </span>
@@ -72,91 +83,101 @@ export const OperationListItem = ({
             </div>
           </div>
         </div>
-        {operation.description && (
-          <Markdown
-            className={`${ProseClasses} max-w-full prose-img:max-w-prose`}
-            content={operation.description}
-          />
-        )}
-        {operation.parameters && operation.parameters.length > 0 && (
-          <>
-            {PARAM_GROUPS.flatMap((group) =>
-              groupedParameters[group]?.length ? (
-                <ParameterList
-                  key={group}
-                  id={operation.slug}
-                  parameters={groupedParameters[group]}
-                  group={group}
-                />
-              ) : (
-                []
-              ),
-            )}
-          </>
-        )}
-        {renderIf(operation.requestBody?.content?.at(0)?.schema, (schema) => (
-          <div className="mt-4 flex flex-col gap-4">
-            <Heading
-              level={3}
-              className="capitalize"
-              id={`${operation.slug}/request-body`}
-            >
-              Request Body
-            </Heading>
-            <SchemaView schema={schema} />
-          </div>
-        ))}
-        {operation.responses.length > 0 && (
-          <>
-            <Heading
-              level={3}
-              className="capitalize mt-8 pt-8 border-t"
-              id={`${operation.slug}/responses`}
-            >
-              Responses
-            </Heading>
-            <Tabs
-              onValueChange={(value) => setSelectedResponse(value)}
-              value={selectedResponse}
-            >
-              {operation.responses.length > 1 && (
-                <TabsList>
+
+        <div className="flex flex-col gap-4">
+          {operation.description && (
+            <Markdown
+              className={`${ProseClasses} max-w-full prose-img:max-w-prose`}
+              content={operation.description}
+            />
+          )}
+          {operation.parameters && operation.parameters.length > 0 && (
+            <>
+              {PARAM_GROUPS.flatMap((group) =>
+                groupedParameters[group]?.length ? (
+                  <ParameterList
+                    key={group}
+                    summary={operation.summary ?? undefined}
+                    id={operation.slug}
+                    parameters={groupedParameters[group]}
+                    group={group}
+                  />
+                ) : (
+                  []
+                ),
+              )}
+            </>
+          )}
+          {renderIf(operation.requestBody?.content?.at(0)?.schema, (schema) => (
+            <div className="mt-4 flex flex-col gap-4">
+              <Heading
+                level={3}
+                className="capitalize"
+                id={`${operation.slug}/request-body`}
+              >
+                {operation.summary && (
+                  <VisuallyHidden>{operation.summary} &rsaquo; </VisuallyHidden>
+                )}
+                Request Body
+              </Heading>
+              <SchemaView schema={schema} />
+            </div>
+          ))}
+          {operation.responses.length > 0 && (
+            <>
+              <Heading
+                level={3}
+                className="capitalize mt-8 pt-8 border-t"
+                id={`${operation.slug}/responses`}
+              >
+                {operation.summary && (
+                  <VisuallyHidden>{operation.summary} &rsaquo; </VisuallyHidden>
+                )}
+                Responses
+              </Heading>
+              <Tabs
+                onValueChange={(value) => setSelectedResponse(value)}
+                value={selectedResponse}
+              >
+                {operation.responses.length > 1 && (
+                  <TabsList>
+                    {operation.responses.map((response) => (
+                      <TabsTrigger
+                        value={response.statusCode}
+                        key={response.statusCode}
+                        title={response.description ?? undefined}
+                      >
+                        {response.statusCode}
+                      </TabsTrigger>
+                    ))}
+                  </TabsList>
+                )}
+                <ul className="list-none m-0 px-0">
                   {operation.responses.map((response) => (
-                    <TabsTrigger
+                    <TabsContent
                       value={response.statusCode}
                       key={response.statusCode}
-                      title={response.description ?? undefined}
                     >
-                      {response.statusCode}
-                    </TabsTrigger>
+                      <SchemaView
+                        schema={
+                          response.content?.find((content) => content.schema)
+                            ?.schema
+                        }
+                      />
+                    </TabsContent>
                   ))}
-                </TabsList>
-              )}
-              <ul className="list-none m-0 px-0">
-                {operation.responses.map((response) => (
-                  <TabsContent
-                    value={response.statusCode}
-                    key={response.statusCode}
-                  >
-                    <SchemaView
-                      schema={
-                        response.content?.find((content) => content.schema)
-                          ?.schema
-                      }
-                    />
-                  </TabsContent>
-                ))}
-              </ul>
-            </Tabs>
-          </>
-        )}
-      </div>
+                </ul>
+              </Tabs>
+            </>
+          )}
+        </div>
 
-      <Sidecar
-        selectedResponse={selectedResponse}
-        onSelectResponse={setSelectedResponse}
-        operation={operation}
-      />
+        <Sidecar
+          selectedResponse={selectedResponse}
+          onSelectResponse={setSelectedResponse}
+          operation={operation}
+        />
+      </div>
     </div>
   );
 };

package/src/lib/plugins/openapi/ParameterList.tsx

@@ -1,3 +1,4 @@
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { Heading } from "../../components/Heading.js";
 import { Card } from "../../ui/Card.js";
 import type { ParameterGroup } from "./OperationListItem.js";
@@ -7,16 +8,19 @@ import {
 } from "./ParameterListItem.js";
 
 export const ParameterList = ({
+  summary,
   group,
   parameters,
   id,
 }: {
+  summary?: string;
   group: ParameterGroup;
   parameters: ParameterListItemResult[];
   id: string;
 }) => (
   <>
     <Heading level={3} id={`${id}/${group}-parameters`} className="capitalize">
+      {summary && <VisuallyHidden>{summary} &rsaquo; </VisuallyHidden>}
       {group === "header" ? "Headers" : `${group} Parameters`}
     </Heading>
     <Card>

package/src/lib/plugins/openapi/PlaygroundDialogWrapper.tsx

@@ -1,3 +1,4 @@
+import { useAuth } from "zudoku/components";
 import type { OperationListItemResult } from "./OperationList.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
 import { Content } from "./SidecarExamples.js";
@@ -13,6 +14,9 @@ export const PlaygroundDialogWrapper = ({
   operation: OperationListItemResult;
   examples?: Content;
 }) => {
+  const { isAuthEnabled, login, signup, isPending, isAuthenticated } =
+    useAuth();
+
   const headers = operation.parameters
     ?.filter((p) => p.in === "header")
     .sort((a, b) => (a.required && !b.required ? -1 : 1))
@@ -49,6 +53,9 @@ export const PlaygroundDialogWrapper = ({
       queryParams={queryParams}
       pathParams={pathParams}
       examples={examples}
+      requiresLogin={isAuthEnabled && !isAuthenticated && !isPending}
+      onLogin={() => login()}
+      onSignUp={() => signup()}
     />
   );
 };

package/src/lib/plugins/openapi/Sidecar.tsx

@@ -175,6 +175,7 @@ export const Sidecar = ({
     <aside
       ref={ref}
       className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4"
+      data-pagefind-ignore="all"
     >
       <SidecarBox.Root>
         <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-2.5 gap-2 text-xs">

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -14,7 +14,7 @@ import * as types from "./graphql.js";
  */
 type Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.ServersQueryDocument;
-  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n": typeof types.OperationsFragmentFragmentDoc;
+  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n": typeof types.OperationsFragmentFragmentDoc;
   "\n  query AllOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n": typeof types.AllOperationsDocument;
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.GetServerQueryDocument;
   "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      tags {\n        name\n      }\n    }\n  }\n": typeof types.GetCategoriesDocument;
@@ -23,7 +23,7 @@ type Documents = {
 const documents: Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.ServersQueryDocument,
-  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
+  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
   "\n  query AllOperations(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
@@ -45,7 +45,7 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n",
+  source: "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n",
 ): typeof import("./graphql.js").OperationsFragmentFragmentDoc;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.

package/src/lib/plugins/openapi/graphql/graphql.ts

@@ -197,6 +197,7 @@ export type OperationsFragmentFragment = {
   operationId?: string | null;
   contentTypes: Array<string>;
   path: string;
+  deprecated?: boolean | null;
   parameters?: Array<{
     __typename?: "ParameterItem";
     name: string;
@@ -374,6 +375,7 @@ export const OperationsFragmentFragmentDoc = new TypedDocumentString(
   operationId
   contentTypes
   path
+  deprecated
   parameters {
     name
     in
@@ -472,6 +474,7 @@ export const AllOperationsDocument = new TypedDocumentString(`
   operationId
   contentTypes
   path
+  deprecated
   parameters {
     name
     in

package/src/lib/plugins/openapi/playground/ExamplesDropdown.tsx

@@ -8,46 +8,44 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "zudoku/ui/DropdownMenu.js";
-import { Content, Example } from "../SidecarExamples.js";
+import type { Content, Example } from "../SidecarExamples.js";
 
 const ExamplesDropdown = ({
   examples,
   onSelect,
 }: {
   examples: Content;
-  onSelect: (example: Example) => void;
+  onSelect: (example: Example, mediaType: string) => void;
 }) => {
   return (
-    <div className="flex flex-col gap-2 mt-2 items-end">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">Use Example</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56">
-          {examples.map((example) => {
-            return (
-              <div key={example.mediaType}>
-                <DropdownMenuLabel>{example.mediaType}</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  {example.examples?.map((example) => {
-                    return (
-                      <DropdownMenuItem
-                        key={example.name}
-                        onSelect={() => onSelect(example)}
-                        className="line-clamp-1"
-                      >
-                        {example.summary ?? example.name}
-                      </DropdownMenuItem>
-                    );
-                  })}
-                </DropdownMenuGroup>
-              </div>
-            );
-          })}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Use Example</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="max-w-72">
+        {examples.map((mediaTypeObject) => (
+          <div key={mediaTypeObject.mediaType}>
+            <DropdownMenuLabel>{mediaTypeObject.mediaType}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              {mediaTypeObject.examples?.map((example) => (
+                <DropdownMenuItem
+                  key={example.name}
+                  onSelect={() => onSelect(example, mediaTypeObject.mediaType)}
+                >
+                  <span
+                    className="line-clamp-1"
+                    title={example.summary ?? example.name}
+                  >
+                    {example.summary ?? example.name}
+                  </span>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuGroup>
+          </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };
 

package/src/lib/plugins/openapi/playground/Headers.tsx

@@ -98,7 +98,6 @@ export const Headers = ({
                     name={`headers.${i}.active`}
                     render={({ field }) => (
                       <Checkbox
-                        variant="outline"
                         id={`headers.${i}.active`}
                         checked={field.value}
                         onCheckedChange={(checked) => {

package/src/lib/plugins/openapi/playground/IdentityDialog.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { Button } from "zudoku/ui/Button.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "zudoku/ui/Dialog.js";
+import { Label } from "zudoku/ui/Label.js";
+import { type ApiIdentity } from "../../../core/ZudokuContext.js";
+import IdentitySelector from "./IdentitySelector.js";
+
+const IdentityDialog = ({
+  onSubmit,
+  identities,
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: ({
+    rememberedIdentity,
+    identity,
+  }: {
+    rememberedIdentity: boolean;
+    identity?: string;
+  }) => void;
+  identities: ApiIdentity[];
+}) => {
+  const [identity, setIdentity] = useState<string | undefined>(undefined);
+  const [rememberedIdentity, setRememberedIdentity] = useState<boolean>(false);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogTitle>Select an auth identity</DialogTitle>
+        <DialogDescription>
+          Please select an identity for this request.
+        </DialogDescription>
+        <div className="max-h-80 overflow-auto">
+          <IdentitySelector
+            identities={identities}
+            setValue={setIdentity}
+            value={identity}
+          />
+        </div>
+        <DialogFooter className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="remember"
+              checked={rememberedIdentity}
+              onCheckedChange={(checked) =>
+                setRememberedIdentity(
+                  checked === "indeterminate" ? false : !!checked,
+                )
+              }
+            />
+            <Label htmlFor="remember">Remember my choice</Label>
+          </div>
+
+          <Button
+            onClick={() => onSubmit({ identity: identity, rememberedIdentity })}
+          >
+            Send
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { IdentityDialog };