zudoku 0.35.6 → 0.37.0

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

@@ -15,24 +15,24 @@ 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    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\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 SchemaWarmup($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      openapi\n    }\n  }\n": typeof types.SchemaWarmupDocument;
+  "\n  query OperationsForTag(\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.OperationsForTagDocument;
   "\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;
-  "\n  query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {\n    schema(input: $input, type: $type) {\n      operations(tag: $tag) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n        tags {\n          name\n        }\n      }\n      untagged: operations(untagged: true) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n      }\n    }\n  }\n": typeof types.GetOperationsDocument;
+  "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n    }\n  }\n": typeof types.GetSidebarOperationsDocument;
 };
 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    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\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,
+  "\n  query SchemaWarmup($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      openapi\n    }\n  }\n":
+    types.SchemaWarmupDocument,
+  "\n  query OperationsForTag(\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.OperationsForTagDocument,
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     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":
-    types.GetCategoriesDocument,
-  "\n  query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {\n    schema(input: $input, type: $type) {\n      operations(tag: $tag) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n        tags {\n          name\n        }\n      }\n      untagged: operations(untagged: true) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n      }\n    }\n  }\n":
-    types.GetOperationsDocument,
+  "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n    }\n  }\n":
+    types.GetSidebarOperationsDocument,
 };
 
 /**
@@ -51,26 +51,26 @@ 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  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 import("./graphql.js").AllOperationsDocument;
+  source: "\n  query SchemaWarmup($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      openapi\n    }\n  }\n",
+): typeof import("./graphql.js").SchemaWarmupDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n",
-): typeof import("./graphql.js").GetServerQueryDocument;
+  source: "\n  query OperationsForTag(\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 import("./graphql.js").OperationsForTagDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      tags {\n        name\n      }\n    }\n  }\n",
-): typeof import("./graphql.js").GetCategoriesDocument;
+  source: "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n",
+): typeof import("./graphql.js").GetServerQueryDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {\n    schema(input: $input, type: $type) {\n      operations(tag: $tag) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n        tags {\n          name\n        }\n      }\n      untagged: operations(untagged: true) {\n        slug\n        deprecated\n        method\n        summary\n        operationId\n        path\n      }\n    }\n  }\n",
-): typeof import("./graphql.js").GetOperationsDocument;
+  source: "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n    }\n  }\n",
+): typeof import("./graphql.js").GetSidebarOperationsDocument;
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

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

@@ -160,8 +160,10 @@ export type SchemaTagsArgs = {
 export type SchemaTag = {
   __typename?: "SchemaTag";
   description?: Maybe<Scalars["String"]["output"]>;
-  name: Scalars["String"]["output"];
+  extensions?: Maybe<Scalars["JSONObject"]["output"]>;
+  name?: Maybe<Scalars["String"]["output"]>;
   operations: Array<OperationItem>;
+  slug?: Maybe<Scalars["String"]["output"]>;
 };
 
 export type SchemaType = "file" | "raw" | "url";
@@ -263,14 +265,24 @@ export type OperationsFragmentFragment = {
   }>;
 } & { " $fragmentName"?: "OperationsFragmentFragment" };
 
-export type AllOperationsQueryVariables = Exact<{
+export type SchemaWarmupQueryVariables = Exact<{
+  input: Scalars["JSON"]["input"];
+  type: SchemaType;
+}>;
+
+export type SchemaWarmupQuery = {
+  __typename?: "Query";
+  schema: { __typename?: "Schema"; openapi: string };
+};
+
+export type OperationsForTagQueryVariables = Exact<{
   input: Scalars["JSON"]["input"];
   type: SchemaType;
   tag?: InputMaybe<Scalars["String"]["input"]>;
   untagged?: InputMaybe<Scalars["Boolean"]["input"]>;
 }>;
 
-export type AllOperationsQuery = {
+export type OperationsForTagQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
@@ -282,7 +294,7 @@ export type AllOperationsQuery = {
     servers: Array<{ __typename?: "Server"; url: string }>;
     tags: Array<{
       __typename?: "SchemaTag";
-      name: string;
+      name?: string | null;
       description?: string | null;
     }>;
     operations: Array<
@@ -309,48 +321,28 @@ export type GetServerQueryQuery = {
   };
 };
 
-export type GetCategoriesQueryVariables = Exact<{
-  input: Scalars["JSON"]["input"];
-  type: SchemaType;
-}>;
-
-export type GetCategoriesQuery = {
-  __typename?: "Query";
-  schema: {
-    __typename?: "Schema";
-    url?: string | null;
-    tags: Array<{ __typename?: "SchemaTag"; name: string }>;
-  };
-};
-
-export type GetOperationsQueryVariables = Exact<{
+export type GetSidebarOperationsQueryVariables = Exact<{
   input: Scalars["JSON"]["input"];
   type: SchemaType;
-  tag?: InputMaybe<Scalars["String"]["input"]>;
 }>;
 
-export type GetOperationsQuery = {
+export type GetSidebarOperationsQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
-    operations: Array<{
-      __typename?: "OperationItem";
-      slug: string;
-      deprecated?: boolean | null;
-      method: string;
-      summary?: string | null;
-      operationId?: string | null;
-      path: string;
-      tags?: Array<{ __typename?: "TagItem"; name: string }> | null;
-    }>;
-    untagged: Array<{
-      __typename?: "OperationItem";
-      slug: string;
-      deprecated?: boolean | null;
-      method: string;
-      summary?: string | null;
-      operationId?: string | null;
-      path: string;
+    tags: Array<{
+      __typename?: "SchemaTag";
+      slug?: string | null;
+      name?: string | null;
+      extensions?: any | null;
+      operations: Array<{
+        __typename?: "OperationItem";
+        summary?: string | null;
+        slug: string;
+        method: string;
+        operationId?: string | null;
+        path: string;
+      }>;
     }>;
   };
 };
@@ -455,8 +447,18 @@ export const ServersQueryDocument = new TypedDocumentString(`
   ServersQueryQuery,
   ServersQueryQueryVariables
 >;
-export const AllOperationsDocument = new TypedDocumentString(`
-    query AllOperations($input: JSON!, $type: SchemaType!, $tag: String, $untagged: Boolean) {
+export const SchemaWarmupDocument = new TypedDocumentString(`
+    query SchemaWarmup($input: JSON!, $type: SchemaType!) {
+  schema(input: $input, type: $type) {
+    openapi
+  }
+}
+    `) as unknown as TypedDocumentString<
+  SchemaWarmupQuery,
+  SchemaWarmupQueryVariables
+>;
+export const OperationsForTagDocument = new TypedDocumentString(`
+    query OperationsForTag($input: JSON!, $type: SchemaType!, $tag: String, $untagged: Boolean) {
   schema(input: $input, type: $type) {
     servers {
       url
@@ -540,8 +542,8 @@ export const AllOperationsDocument = new TypedDocumentString(`
     }
   }
 }`) as unknown as TypedDocumentString<
-  AllOperationsQuery,
-  AllOperationsQueryVariables
+  OperationsForTagQuery,
+  OperationsForTagQueryVariables
 >;
 export const GetServerQueryDocument = new TypedDocumentString(`
     query getServerQuery($input: JSON!, $type: SchemaType!) {
@@ -556,44 +558,24 @@ export const GetServerQueryDocument = new TypedDocumentString(`
   GetServerQueryQuery,
   GetServerQueryQueryVariables
 >;
-export const GetCategoriesDocument = new TypedDocumentString(`
-    query GetCategories($input: JSON!, $type: SchemaType!) {
+export const GetSidebarOperationsDocument = new TypedDocumentString(`
+    query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
   schema(input: $input, type: $type) {
-    url
     tags {
-      name
-    }
-  }
-}
-    `) as unknown as TypedDocumentString<
-  GetCategoriesQuery,
-  GetCategoriesQueryVariables
->;
-export const GetOperationsDocument = new TypedDocumentString(`
-    query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {
-  schema(input: $input, type: $type) {
-    operations(tag: $tag) {
       slug
-      deprecated
-      method
-      summary
-      operationId
-      path
-      tags {
-        name
+      name
+      extensions
+      operations {
+        summary
+        slug
+        method
+        operationId
+        path
       }
     }
-    untagged: operations(untagged: true) {
-      slug
-      deprecated
-      method
-      summary
-      operationId
-      path
-    }
   }
 }
     `) as unknown as TypedDocumentString<
-  GetOperationsQuery,
-  GetOperationsQueryVariables
+  GetSidebarOperationsQuery,
+  GetSidebarOperationsQueryVariables
 >;

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

@@ -1,14 +1,12 @@
-import type { ResultOf } from "@graphql-typed-document-node/core";
-import slugify from "@sindresorhus/slugify";
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
 import { type ReactNode } from "react";
 import { matchPath } from "react-router";
 import { useAuth } from "../../authentication/hook.js";
 import { type ZudokuPlugin } from "../../core/plugins.js";
-import type { SchemaImports } from "../../oas/graphql/index.js";
 import { Button } from "../../ui/Button.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { GraphQLClient } from "./client/GraphQLClient.js";
+import type { GetSidebarOperationsQuery } from "./graphql/graphql.js";
 import { graphql } from "./graphql/index.js";
 import { type OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
@@ -16,54 +14,33 @@ import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
 import { createSidebarCategory } from "./util/createSidebarCategory.js";
 import { getRoutes, getVersions } from "./util/getRoutes.js";
 
-const GetCategoriesQuery = graphql(`
-  query GetCategories($input: JSON!, $type: SchemaType!) {
+const GetSidebarOperationsQuery = graphql(`
+  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
-      url
       tags {
-        name
-      }
-    }
-  }
-`);
-
-const GetOperationsQuery = graphql(`
-  query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {
-    schema(input: $input, type: $type) {
-      operations(tag: $tag) {
         slug
-        deprecated
-        method
-        summary
-        operationId
-        path
-        tags {
-          name
+        name
+        extensions
+        operations {
+          summary
+          slug
+          method
+          operationId
+          path
         }
       }
-      untagged: operations(untagged: true) {
-        slug
-        deprecated
-        method
-        summary
-        operationId
-        path
-      }
     }
   }
 `);
 
-export type OperationResult = ResultOf<
-  typeof GetOperationsQuery
->["schema"]["operations"][number];
-
-type InternalOasPluginConfig = { schemaImports?: SchemaImports };
+export type OperationResult =
+  GetSidebarOperationsQuery["schema"]["tags"][number]["operations"][number];
 
-export type OpenApiPluginOptions = OasPluginConfig & InternalOasPluginConfig;
+export type OpenApiPluginOptions = OasPluginConfig;
 
 export const UNTAGGED_PATH = "~endpoints";
 
-export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
+export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
   const basePath = joinUrl(config.navigationId ?? "/reference");
   const client = new GraphQLClient(config);
 
@@ -134,7 +111,7 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
         );
       },
     }),
-    getSidebar: async (path: string) => {
+    getSidebar: async (path, context) => {
       if (!matchPath({ path: basePath, end: false }, path)) {
         return [];
       }
@@ -147,67 +124,46 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
       try {
         const versionParam = match?.params.version;
         const version = versionParam ?? getVersions(config).at(0);
-        const { type, options } = config;
+        const { type } = config;
         const input = type === "file" ? config.input[version!] : config.input;
 
-        const collapsible = options?.loadTags === true || config.type === "url";
-        const collapsed = !options?.loadTags && config.type !== "url";
-
-        // find  tag name by slug in config.tagPages
-        const tagName = config.tagPages?.find(
-          (tag) => slugify(tag) === match?.params.tag,
-        );
+        const data = await context.queryClient.ensureQueryData({
+          queryKey: ["sidebar-operations-query", input],
+          queryFn: () =>
+            client.fetch(GetSidebarOperationsQuery, { type, input }),
+        });
 
-        const [tagData, operationsData] = await Promise.all([
-          client.fetch(GetCategoriesQuery, { type, input }),
-          client.fetch(GetOperationsQuery, {
-            type,
-            input,
-            tag: !options?.loadTags ? tagName : undefined,
-          }),
-        ]);
-
-        const categories = tagData.schema.tags.flatMap((tag) => {
-          const categoryPath = joinUrl(
-            basePath,
-            versionParam,
-            slugify(tag.name),
-          );
+        const categories = data.schema.tags.flatMap((tag) => {
+          if (!tag.name || tag.operations.length === 0) return [];
 
-          const operations = operationsData.schema.operations.filter(
-            (operation) =>
-              operation.tags?.length !== 0 &&
-              operation.tags?.map((t) => t.name).includes(tag.name),
-          );
+          const categoryPath = joinUrl(basePath, versionParam, tag.slug);
 
-          // skip empty categories
-          if (options?.loadTags && operations.length === 0) {
-            return [];
-          }
+          const isCollapsed =
+            tag.extensions?.["x-zudoku-collapsed"] ??
+            !config.options?.expandAllTags;
+          const isCollapsible =
+            tag.extensions?.["x-zudoku-collapsible"] ?? true;
 
           return createSidebarCategory({
             label: tag.name,
             path: categoryPath,
-            operations:
-              match?.params.tag !== UNTAGGED_PATH || options?.loadTags
-                ? operations
-                : [],
-            collapsible,
-            collapsed,
+            operations: tag.operations,
+            collapsed: isCollapsed,
+            collapsible: isCollapsible,
           });
         });
 
-        if (operationsData.schema.untagged.length > 0) {
+        const untaggedOperations = data.schema.tags.find(
+          (tag) => !tag.name,
+        )?.operations;
+
+        if (untaggedOperations) {
           categories.push(
             createSidebarCategory({
               label: "Other endpoints",
               path: joinUrl(basePath, versionParam, UNTAGGED_PATH),
-              operations:
-                match?.params.tag === UNTAGGED_PATH || options?.loadTags
-                  ? operationsData.schema.untagged
-                  : [],
-              collapsible,
-              collapsed,
+              operations: untaggedOperations,
+              collapsed: !config.options?.expandAllTags,
             }),
           );
         }

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

@@ -1,3 +1,5 @@
+import type { SchemaImports } from "../../oas/graphql/index.js";
+
 type DynamicInput = () => Promise<unknown>;
 
 type OasSource =
@@ -15,11 +17,12 @@ type BaseOasConfig = {
   navigationId?: string;
   skipPreload?: boolean;
   tagPages?: Array<string>;
+  schemaImports?: SchemaImports;
   options?: {
     examplesLanguage?: string;
     disablePlayground?: boolean;
-    loadTags?: boolean;
     showVersionSelect?: "always" | "if-available" | "hide";
+    expandAllTags?: boolean;
   };
 };
 

package/src/lib/plugins/openapi/schema/SchemaPropertyItem.tsx

@@ -71,7 +71,7 @@ export const SchemaPropertyItem = ({
     return (
       <li className="p-4 bg-border/20 hover:bg-border/30">
         <div className="flex flex-col gap-2.5 justify-between text-sm">
-          <div className="flex gap-2 items-center">
+          <div className="space-x-2">
             <code>{name}</code>
             <ParamInfos schema={schema} />
             <RecursiveIndicator />
@@ -84,7 +84,7 @@ export const SchemaPropertyItem = ({
   return (
     <li className="p-4 bg-border/20 hover:bg-border/30">
       <div className="flex flex-col gap-2.5 justify-between text-sm">
-        <div className="flex gap-2 items-center">
+        <div className="space-x-2">
           <SelectOnClick asChild>
             <code>{name}</code>
           </SelectOnClick>
@@ -106,6 +106,9 @@ export const SchemaPropertyItem = ({
             content={schema.description}
           />
         )}
+        {schema.type === "array" && "items" in schema && schema.items.enum && (
+          <EnumValues values={schema.items.enum} />
+        )}
         {schema.enum && <EnumValues values={schema.enum} />}
 
         {(hasLogicalGroupings(schema) || isComplexType(schema)) && (

package/src/lib/plugins/openapi/schema/SchemaView.tsx

@@ -3,12 +3,22 @@ import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Card, CardContent, CardHeader, CardTitle } from "../../../ui/Card.js";
 import { cn } from "../../../util/cn.js";
 import { groupBy } from "../../../util/groupBy.js";
+import { EnumValues } from "../components/EnumValues.js";
+import { ParamInfos } from "../ParamInfos.js";
 import {
   SchemaLogicalGroup,
   SchemaPropertyItem,
 } from "./SchemaPropertyItem.js";
 import { hasLogicalGroupings } from "./utils.js";
 
+const renderMarkdown = (content?: string) =>
+  content && (
+    <Markdown
+      className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
+      content={content}
+    />
+  );
+
 export const SchemaView = ({
   schema,
   level = 0,
@@ -33,11 +43,33 @@ export const SchemaView = ({
       return <SchemaLogicalGroup schema={schema} level={level} />;
     }
 
-    // Sometimes items is not defined
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (schema.type === "array" && schema.items) {
+    if (Array.isArray(schema.type)) {
+      return (
+        <Card className="p-4 space-y-2">
+          <span className="text-sm text-muted-foreground">
+            <ParamInfos schema={schema} />
+          </span>
+          {schema.enum && <EnumValues values={schema.enum} />}
+          {renderMarkdown(schema.description)}
+        </Card>
+      );
+    }
+
+    if (schema.type === "array" && typeof schema.items === "object") {
       const itemsSchema = schema.items as SchemaObject;
 
+      if (itemsSchema.enum) {
+        return (
+          <Card className="p-4">
+            <span className="text-sm text-muted-foreground">
+              <ParamInfos schema={schema} />
+            </span>
+            <EnumValues values={itemsSchema.enum} />
+            {renderMarkdown(schema.description)}
+          </Card>
+        );
+      }
+
       if (
         typeof itemsSchema.type === "string" &&
         ["string", "number", "boolean", "integer"].includes(itemsSchema.type)
@@ -45,17 +77,9 @@ export const SchemaView = ({
         return (
           <Card className="p-4">
             <span className="text-sm text-muted-foreground">
-              {itemsSchema.type}[]
+              <ParamInfos schema={schema} />
             </span>
-            {schema.description && (
-              <Markdown
-                className={cn(
-                  ProseClasses,
-                  "text-sm leading-normal line-clamp-4",
-                )}
-                content={schema.description}
-              />
-            )}
+            {renderMarkdown(schema.description)}
           </Card>
         );
       } else if (itemsSchema.type === "object") {
@@ -75,18 +99,12 @@ export const SchemaView = ({
       (!schema.properties || Object.keys(schema.properties).length === 0)
     ) {
       return (
-        <Card className="p-4 flex gap-2 items-center">
+        <Card className="p-4 flex gap-2 items-baseline">
           {"name" in schema && <>{schema.name as string}</>}
-          <span className="text-sm text-muted-foreground">object</span>
-          {schema.description && (
-            <Markdown
-              className={cn(
-                ProseClasses,
-                "text-sm leading-normal line-clamp-4",
-              )}
-              content={schema.description}
-            />
-          )}
+          <span className="text-sm text-muted-foreground">
+            <ParamInfos schema={schema} />
+          </span>
+          {renderMarkdown(schema.description)}
         </Card>
       );
     }
@@ -133,17 +151,12 @@ export const SchemaView = ({
       ["string", "number", "boolean", "integer", "null"].includes(schema.type)
     ) {
       return (
-        <Card className="p-4">
-          <span className="text-sm text-muted-foreground">{schema.type}</span>
-          {schema.description && (
-            <Markdown
-              className={cn(
-                ProseClasses,
-                "text-sm leading-normal line-clamp-4",
-              )}
-              content={schema.description}
-            />
-          )}
+        <Card className="p-4 space-y-2">
+          <span className="text-sm text-muted-foreground">
+            <ParamInfos schema={schema} />
+          </span>
+          {schema.enum && <EnumValues values={schema.enum} />}
+          {renderMarkdown(schema.description)}
         </Card>
       );
     }

package/src/lib/plugins/openapi/util/createSidebarCategory.tsx

@@ -28,12 +28,10 @@ export const createSidebarCategory = ({
     type: "link" as const,
     label: operation.summary ?? operation.path,
     href: `${path}#${operation.slug}`,
-    ...(operation.method && {
-      badge: {
-        label: operation.method,
-        color: MethodColorMap[operation.method.toLowerCase()]!,
-        invert: true,
-      } as const,
-    }),
+    badge: {
+      label: operation.method,
+      color: MethodColorMap[operation.method.toLowerCase()]!,
+      invert: true,
+    },
   })),
 });