zudoku 0.0.0-ee328ec → 0.0.0-efc60ba6

package/src/lib/plugins/openapi/playground/result-panel/ResponseTab.tsx

@@ -1,7 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
-import { ChevronRightIcon } from "lucide-react";
-import { Fragment, useState } from "react";
-import { Callout } from "zudoku/ui/Callout.js";
+import {
+  CornerDownLeftIcon,
+  CornerDownRightIcon,
+  DownloadIcon,
+  PlusCircleIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { Button } from "zudoku/ui/Button.js";
 import {
   Collapsible,
   CollapsibleContent,
@@ -14,30 +19,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
-import { Card } from "../../../../ui/Card.js";
-import { SyntaxHighlight } from "../../../../ui/SyntaxHighlight.js";
+import createVariantComponent from "../../../../util/createVariantComponent.js";
+import { humanFileSize } from "../../../../util/humanFileSize.js";
+import {
+  CollapsibleHeader,
+  CollapsibleHeaderTrigger,
+} from "../CollapsibleHeader.js";
 import { convertToTypes } from "./convertToTypes.js";
-
-const statusCodeMap: Record<number, string> = {
-  200: "OK",
-  201: "Created",
-  202: "Accepted",
-  204: "No Content",
-  400: "Bad Request",
-  401: "Unauthorized",
-  403: "Forbidden",
-  404: "Not Found",
-  405: "Method Not Allowed",
-  500: "Internal Server Error",
-};
-
-const humanFileSize = (bytes: number) => {
-  const exponent = Math.floor(Math.log(bytes) / Math.log(1000.0));
-  const decimal = (bytes / Math.pow(1000.0, exponent)).toFixed(
-    exponent ? 2 : 0,
-  );
-  return `${decimal} ${exponent ? `${"kMGTPEZY"[exponent - 1]}B` : "B"}`;
-};
+import { Highlight } from "./Highlight.js";
 
 const mimeTypeToLanguage = (mimeType: string) => {
   const mimeTypeMapping = {
@@ -57,7 +46,7 @@ const mimeTypeToLanguage = (mimeType: string) => {
 
 const detectLanguage = (headers: Array<[string, string]>) => {
   const contentType =
-    headers.find(([key, value]) => key === "Content-Type")?.[1] || "";
+    headers.find(([key]) => key.toLowerCase() === "content-type")?.[1] || "";
   return mimeTypeToLanguage(contentType);
 };
 
@@ -92,22 +81,36 @@ const sortHeadersByRelevance = (
   });
 };
 
-const SYNTAX_HIGHLIGHT_MAX_SIZE_THRESHOLD = 64_000;
+const MAX_HEADERS_TO_SHOW = 3;
+
+const Row = createVariantComponent(
+  "div",
+  "grid-cols-subgrid grid border-b col-span-full px-4 py-1.5 font-mono text-xs",
+);
+
+const RowContent = createVariantComponent("div", "py-1 break-all");
 
 export const ResponseTab = ({
   body = "",
   headers,
-  status,
-  time,
+  request,
   size,
-  url,
+  isBinary = false,
+  fileName,
+  blob,
 }: {
   body?: string;
   headers: Array<[string, string]>;
-  status: number;
-  time: number;
+  request: {
+    method: string;
+    url: string;
+    headers: Array<[string, string]>;
+    body?: string;
+  };
   size: number;
-  url: string;
+  isBinary?: boolean;
+  fileName?: string;
+  blob?: Blob;
 }) => {
   const detectedLanguage = detectLanguage(headers);
   const jsonContent = tryParseJson(body);
@@ -121,40 +124,80 @@ export const ResponseTab = ({
     queryFn: async () => {
       return convertToTypes(JSON.parse(beautifiedBody));
     },
-    enabled: view === "types",
+    enabled: view === "types" && !isBinary,
   });
 
+  const handleDownload = () => {
+    if (blob && fileName) {
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }
+  };
+
   const sortedHeaders = sortHeadersByRelevance([...headers]);
-  const shouldDisableHighlighting = size > SYNTAX_HIGHLIGHT_MAX_SIZE_THRESHOLD;
 
   return (
-    <div className="flex flex-col gap-2 h-full overflow-auto max-h-[calc(100vh-220px)] ">
+    <>
+      <Collapsible defaultOpen>
+        <CollapsibleHeaderTrigger>
+          <CornerDownRightIcon size={16} />
+          <CollapsibleHeader className="col-span-2">
+            Header Request
+          </CollapsibleHeader>
+        </CollapsibleHeaderTrigger>
+        <CollapsibleContent>
+          <div className="grid grid-cols-2 gap-x-6 text-sm">
+            {request.headers
+              .slice(0, MAX_HEADERS_TO_SHOW)
+              .map(([key, value]) => (
+                <Row key={key}>
+                  <RowContent>{key}</RowContent>
+                  <RowContent>{value}</RowContent>
+                </Row>
+              ))}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
       <Collapsible defaultOpen>
-        <CollapsibleTrigger className="flex items-center gap-2 hover:text-primary group">
-          <ChevronRightIcon className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
-          <span className="font-semibold">Headers</span>
-        </CollapsibleTrigger>
+        <CollapsibleHeaderTrigger>
+          <CornerDownLeftIcon size={16} />
+          <CollapsibleHeader className="col-span-2">
+            Header Response
+          </CollapsibleHeader>
+        </CollapsibleHeaderTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 ps-1.5 pt-2 font-mono text-xs">
-            {sortedHeaders.slice(0, 5).map(([key, value]) => (
-              <Fragment key={key}>
-                <div className="text-primary whitespace-pre">{key}</div>
-                <div className="break-all">{value}</div>
-              </Fragment>
+          <div className="grid grid-cols-2 gap-x-6 text-sm">
+            {sortedHeaders.slice(0, MAX_HEADERS_TO_SHOW).map(([key, value]) => (
+              <Row key={key}>
+                <RowContent>{key}</RowContent>
+                <RowContent>{value}</RowContent>
+              </Row>
             ))}
-            {sortedHeaders.length > 5 && (
-              <Collapsible className="col-span-full grid-cols-subgrid grid">
-                <CollapsibleTrigger className="col-span-2 text-xs text-muted-foreground hover:text-primary flex items-center gap-1 py-1">
-                  <ChevronRightIcon className="h-3 w-3 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
-                  Show {sortedHeaders.length - 5} more headers
+            {sortedHeaders.length > MAX_HEADERS_TO_SHOW && (
+              <Collapsible className="col-span-full grid-cols-subgrid grid group">
+                <CollapsibleTrigger className="data-[state=open]:hidden justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                  <span>
+                    Show {sortedHeaders.length - MAX_HEADERS_TO_SHOW} more
+                    headers
+                  </span>
+                  <PlusCircleIcon size={12} className="text-muted-foreground" />
                 </CollapsibleTrigger>
-                <CollapsibleContent className="col-span-full grid grid-cols-subgrid gap-x-8 gap-y-1 ">
-                  {sortedHeaders.slice(5).map(([key, value]) => (
-                    <Fragment key={key}>
-                      <div className="text-primary whitespace-pre">{key}</div>
-                      <div className="break-all">{value}</div>
-                    </Fragment>
-                  ))}
+                <CollapsibleContent className="col-span-full grid grid-cols-subgrid">
+                  {sortedHeaders
+                    .slice(MAX_HEADERS_TO_SHOW)
+                    .map(([key, value]) => (
+                      <Row key={key}>
+                        <RowContent>{key}</RowContent>
+                        <RowContent>{value}</RowContent>
+                      </Row>
+                    ))}
                 </CollapsibleContent>
               </Collapsible>
             )}
@@ -162,58 +205,14 @@ export const ResponseTab = ({
         </CollapsibleContent>
       </Collapsible>
 
-      <Card className="shadow-none">
-        {shouldDisableHighlighting && (
-          <Callout type="info" className="my-0 p-2">
-            Code highlight is disabled for responses larger than{" "}
-            {humanFileSize(SYNTAX_HIGHLIGHT_MAX_SIZE_THRESHOLD)}
-          </Callout>
-        )}
-        <SyntaxHighlight
-          language={
-            view === "types"
-              ? "typescript"
-              : view === "raw"
-                ? jsonContent
-                  ? "plain"
-                  : detectedLanguage
-                : "json"
-          }
-          showCopy="always"
-          disabled={shouldDisableHighlighting}
-          noBackground
-          className="overflow-x-auto p-4 text-xs max-h-[calc(83.333vh-180px)]"
-          code={
-            (view === "raw"
-              ? body
-              : view === "types"
-                ? types.data?.lines.join("\n")
-                : beautifiedBody) ?? ""
-          }
-        />
-      </Card>
-      <div className="flex gap-2 justify-between items-center">
-        <div className="flex text-xs gap-2 border bg-muted rounded-md p-2 items-center h-8 font-mono divide-x">
-          <div>
-            <span className="text-muted-foreground">Status</span> {status}{" "}
-            {statusCodeMap[status] ?? ""}
-          </div>
-          <div>
-            <span className="text-muted-foreground">Time</span>{" "}
-            {time.toFixed(0)}ms
-          </div>
-          <div>
-            <span className="text-muted-foreground">Size</span>{" "}
-            {humanFileSize(size)}
-          </div>
-        </div>
-        {jsonContent && (
-          <div>
+      <div className="flex gap-2 justify-between items-center border-b h-10">
+        {jsonContent && !isBinary && (
+          <div className="px-2">
             <Select
               value={view}
               onValueChange={(value) => setView(value as "formatted" | "raw")}
             >
-              <SelectTrigger className="min-w-32">
+              <SelectTrigger className="min-w-32 border-none h-8">
                 <SelectValue placeholder="View" />
               </SelectTrigger>
               <SelectContent>
@@ -225,6 +224,48 @@ export const ResponseTab = ({
           </div>
         )}
       </div>
-    </div>
+      <div>
+        {isBinary ? (
+          <div className="p-4 text-center">
+            <div className="flex flex-col items-center gap-4">
+              <div className="text-lg font-semibold">Binary Content</div>
+              <div className="text-sm text-muted-foreground">
+                This response contains binary data that cannot be displayed as
+                text.
+              </div>
+              <Button
+                onClick={handleDownload}
+                className="flex items-center gap-2"
+                disabled={!blob}
+              >
+                <DownloadIcon className="h-4 w-4" />
+                Download {fileName || "file"} ({humanFileSize(size)})
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="overflow-auto max-w-full p-4 text-xs max-h-[calc(83.333vh-180px)]">
+            <Highlight
+              language={
+                view === "types"
+                  ? "typescript"
+                  : view === "raw"
+                    ? jsonContent
+                      ? "plain"
+                      : detectedLanguage
+                    : "json"
+              }
+              code={
+                (view === "raw"
+                  ? body
+                  : view === "types"
+                    ? types.data?.lines.join("\n")
+                    : beautifiedBody) ?? ""
+              }
+            />
+          </div>
+        )}
+      </div>
+    </>
   );
 };

package/src/lib/plugins/openapi/playground/result-panel/ResultPanel.tsx

@@ -1,119 +1,98 @@
 import { type UseMutationResult } from "@tanstack/react-query";
-import { Spinner } from "../../../../components/Spinner.js";
+import { SendIcon, UnplugIcon } from "lucide-react";
+import { Spinner } from "zudoku/components";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
 import { Button } from "../../../../ui/Button.js";
-import { Callout } from "../../../../ui/Callout.js";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "../../../../ui/Card.js";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../../../ui/Tabs.js";
 import { cn } from "../../../../util/cn.js";
 import { type PlaygroundResult } from "../Playground.js";
-import { RequestTab } from "./RequestTab.js";
+import ResponseStatusBar from "./ResponseStatusBar.js";
 import { ResponseTab } from "./ResponseTab.js";
 
 export const ResultPanel = ({
   queryMutation,
-  showPathParamsWarning,
   showLongRunningWarning,
   onCancel,
+  tip,
+  isFinished,
+  progress,
 }: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
-  showPathParamsWarning: boolean;
   showLongRunningWarning?: boolean;
   onCancel?: () => void;
+  isFinished: boolean;
+  progress: number;
+  tip?: React.ReactNode;
 }) => {
-  const status = ((queryMutation.data?.status ?? 0) / 100).toFixed(0);
   return (
-    <div className="min-w-0 p-4 py-8 bg-muted/50">
+    <div className="overflow-y-auto h-[80vh] bg-muted/50">
+      {(queryMutation.isPending || queryMutation.data) && (
+        <ResponseStatusBar
+          status={queryMutation.data?.status}
+          time={queryMutation.data?.time}
+          size={queryMutation.data?.size}
+          isFinished={isFinished}
+          progress={progress}
+        />
+      )}
       {queryMutation.error ? (
-        <div className="flex flex-col gap-2">
-          {showPathParamsWarning && (
-            <Callout type="caution">
-              Some path parameters are missing values. Please fill them in to
-              ensure the request is sent correctly.
-            </Callout>
-          )}
-          <Card>
-            <CardHeader>
-              <CardTitle>Request failed</CardTitle>
-            </CardHeader>
-            <CardContent>
-              Error:{" "}
+        <div className="max-w-2/3 mx-auto mt-20">
+          <Alert>
+            <UnplugIcon size={24} strokeWidth={1.5} className="me-5" />
+            <AlertTitle>Request failed</AlertTitle>
+            <AlertDescription>
               {queryMutation.error.message ||
                 String(queryMutation.error) ||
                 "Unexpected error"}
-            </CardContent>
-          </Card>
+            </AlertDescription>
+          </Alert>
         </div>
       ) : queryMutation.data ? (
-        <Tabs defaultValue="response">
-          <TabsList>
-            <TabsTrigger value="request">Request</TabsTrigger>
-            <TabsTrigger value="response">
-              Response
-              <span
-                className={cn(
-                  "text-xs font-mono ms-1",
-                  status === "2" && "text-green-500",
-                  status === "3" && "text-blue-500",
-                  status === "4" && "text-yellow-500",
-                  status === "5" && "text-red-500",
-                )}
-              >
-                ({queryMutation.data.status})
-              </span>
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="request">
-            <RequestTab {...queryMutation.data.request} />
-          </TabsContent>
-          <TabsContent value="response">
-            <ResponseTab
-              status={queryMutation.data.status}
-              time={queryMutation.data.time}
-              size={queryMutation.data.size}
-              headers={queryMutation.data.headers}
-              body={queryMutation.data.body}
-              url={queryMutation.data.request.url}
-            />
-          </TabsContent>
-        </Tabs>
-      ) : (
+        <ResponseTab
+          request={queryMutation.data.request}
+          size={queryMutation.data.size}
+          headers={queryMutation.data.headers}
+          body={queryMutation.data.body}
+          isBinary={queryMutation.data.isBinary}
+          fileName={queryMutation.data.fileName}
+          blob={queryMutation.data.blob}
+        />
+      ) : queryMutation.isPending ? (
         <div className="grid place-items-center h-full">
-          {queryMutation.isPending ? (
-            <div className="flex flex-col gap-2 items-center mt-20">
-              <Spinner size={20} />
-              <div
-                className={cn(
-                  "opacity-0 pointer-events-none transition-opacity h-20 text-sm text-muted-foreground duration-300 flex flex-col gap-2 items-center",
-                  showLongRunningWarning && "opacity-100 pointer-events-auto",
-                )}
+          <div className="flex flex-col gap-2 items-center mt-20">
+            <Spinner />
+            <div
+              className={cn(
+                "opacity-0 pointer-events-none transition-opacity h-20 text-sm text-muted-foreground duration-300 flex flex-col gap-2 items-center",
+                showLongRunningWarning && "opacity-100 pointer-events-auto",
+              )}
+            >
+              Looks like the request is taking longer than expected.
+              <Button
+                type="button"
+                onClick={onCancel}
+                size="sm"
+                className="w-fit"
+                variant="outline"
               >
-                Looks like the request is taking longer than expected.
-                <Button
-                  type="button"
-                  onClick={onCancel}
-                  size="sm"
-                  className="w-fit"
-                  variant="outline"
-                >
-                  Cancel
-                </Button>
-              </div>
+                Cancel
+              </Button>
             </div>
-          ) : (
+          </div>
+        </div>
+      ) : (
+        <div className="h-full grid place-items-center">
+          <div className="flex flex-col gap-4 items-center">
+            <SendIcon
+              size={64}
+              className="text-muted-foreground"
+              strokeWidth={1.2}
+            />
             <span className="text-[16px] font-semibold text-muted-foreground">
-              Send a request first to see the response here
+              Send your first request
             </span>
-          )}
+            {tip}
+          </div>
         </div>
       )}
     </div>

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

@@ -0,0 +1,20 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+type RememberSkipLoginState = {
+  skipLogin: boolean;
+  setSkipLogin: (skipLogin: boolean) => void;
+};
+
+export const useRememberSkipLoginDialog = create<RememberSkipLoginState>()(
+  persist(
+    (set) => ({
+      skipLogin: false,
+      setSkipLogin: (skipLogin: boolean) => set({ skipLogin }),
+    }),
+    {
+      name: "remember-skip-login",
+      storage: createJSONStorage(() => sessionStorage),
+    },
+  ),
+);

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

@@ -9,24 +9,24 @@ export const SchemaExampleAndDefault = ({
   const example = schema.examples?.at(0);
   const defaultValue = schema.default;
 
-  if (!example && !defaultValue) return null;
+  if (example === undefined && defaultValue === undefined) return null;
 
   return (
     <div className="flex flex-col gap-1 text-xs">
-      {example && (
+      {example !== undefined && (
         <div>
           <span className="text-muted-foreground">Example: </span>
-          <SelectOnClick className="border rounded px-1 font-mono">
+          <SelectOnClick className="border rounded-sm px-1 font-mono">
             {typeof example === "object" || typeof example === "boolean"
               ? JSON.stringify(example)
               : example}
           </SelectOnClick>
         </div>
       )}
-      {defaultValue && (
+      {defaultValue !== undefined && (
         <div>
           <span className="text-muted-foreground">Default: </span>
-          <SelectOnClick className="border rounded px-1 font-mono">
+          <SelectOnClick className="border rounded-sm px-1 font-mono">
             {typeof defaultValue === "object" ||
             typeof defaultValue === "boolean"
               ? JSON.stringify(defaultValue)

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

@@ -2,10 +2,9 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
 import { useCallback, useState } from "react";
 import { InlineCode } from "../../../components/InlineCode.js";
-import { Markdown, ProseClasses } from "../../../components/Markdown.js";
+import { Markdown } from "../../../components/Markdown.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Button } from "../../../ui/Button.js";
-import { cn } from "../../../util/cn.js";
 import { objectEntries } from "../../../util/objectEntries.js";
 import { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
@@ -15,7 +14,9 @@ import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
 import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import { SchemaView } from "./SchemaView.js";
 import {
+  extractCircularRefInfo,
   hasLogicalGroupings,
+  isArrayCircularRef,
   isArrayType,
   isCircularRef,
   isComplexType,
@@ -40,13 +41,13 @@ export const SchemaLogicalGroup = ({ schema }: { schema: SchemaObject }) => {
   }
 };
 
-const RecursiveIndicator = () => (
+const RecursiveIndicator = ({ circularProp }: { circularProp?: string }) => (
   <InlineCode
     className="inline-flex items-center gap-1.5 italic text-xs translate-y-0.5"
     selectOnClick={false}
   >
     <RefreshCcwDotIcon size={13} />
-    <span>circular</span>
+    <span>{circularProp ? `${circularProp} (circular)` : "circular"}</span>
   </InlineCode>
 );
 
@@ -82,6 +83,16 @@ export const SchemaPropertyItem = ({
     );
   }
 
+  const isCollapsible = Boolean(
+    (hasLogicalGroupings(schema) ||
+      isComplexType(schema) ||
+      (isArrayType(schema) &&
+        "items" in schema &&
+        isComplexType(schema.items)) ||
+      schema.additionalProperties) &&
+      !isArrayCircularRef(schema),
+  );
+
   return (
     <li className="p-4 bg-border/20 hover:bg-border/30">
       <div className="flex flex-col gap-2.5 justify-between text-sm">
@@ -95,15 +106,17 @@ export const SchemaPropertyItem = ({
               group !== "optional" && (
                 <span className="text-primary">required</span>
               ),
-              isArrayType(schema) &&
-                "items" in schema &&
-                isCircularRef(schema.items) && <RecursiveIndicator />,
+              isArrayCircularRef(schema) && (
+                <RecursiveIndicator
+                  circularProp={extractCircularRefInfo(schema.items)}
+                />
+              ),
             ]}
           />
         </div>
         {schema.description && (
           <Markdown
-            className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
+            className="text-sm leading-normal"
             content={schema.description}
           />
         )}
@@ -113,10 +126,7 @@ export const SchemaPropertyItem = ({
         {schema.const && <ConstValue schema={schema} hideDescription />}
         {schema.enum && <EnumValues values={schema.enum} />}
         <SchemaExampleAndDefault schema={schema} />
-        {(hasLogicalGroupings(schema) ||
-          isComplexType(schema) ||
-          isArrayType(schema) ||
-          schema.additionalProperties) && (
+        {isCollapsible && (
           <Collapsible.Root
             defaultOpen={defaultOpen}
             open={isOpen}
@@ -136,14 +146,9 @@ export const SchemaPropertyItem = ({
                   <SchemaLogicalGroup schema={schema} />
                 ) : schema.type === "object" ? (
                   <SchemaView schema={schema} />
-                ) : (
-                  isArrayType(schema) &&
-                  "items" in schema &&
-                  typeof schema.items === "object" &&
-                  !isCircularRef(schema.items) && (
-                    <SchemaView schema={schema.items} />
-                  )
-                )}
+                ) : isArrayType(schema) && "items" in schema ? (
+                  <SchemaView schema={schema.items} />
+                ) : null}
               </div>
             </Collapsible.Content>
           </Collapsible.Root>