zudoku 0.0.0-f0602bf → 0.0.0-f0b4321

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

@@ -1,18 +1,30 @@
-import { XIcon } from "lucide-react";
+import {
+  CircleAlertIcon,
+  LockIcon,
+  PlusCircleIcon,
+  TableOfContentsIcon,
+  XIcon,
+} from "lucide-react";
 import { useCallback, useEffect, useRef } from "react";
 import {
-  Control,
+  type Control,
   Controller,
   useFieldArray,
   useFormContext,
 } from "react-hook-form";
-import { Card } from "zudoku/ui/Card.js";
 import { Checkbox } from "zudoku/ui/Checkbox.js";
+import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "zudoku/ui/Tooltip.js";
 import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Button } from "../../../ui/Button.js";
 import { Input } from "../../../ui/Input.js";
+import { cn } from "../../../util/cn.js";
+import {
+  CollapsibleHeader,
+  CollapsibleHeaderTrigger,
+} from "./CollapsibleHeader.js";
 import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
-import { Header, type PlaygroundForm } from "./Playground.js";
+import { type Header, type PlaygroundForm } from "./Playground.js";
 
 const headerOptions = Object.freeze([
   "Accept",
@@ -45,23 +57,29 @@ const headerOptions = Object.freeze([
 
 export const Headers = ({
   control,
-  headers: schemaHeaders,
+  schemaHeaders,
+  lockedHeaders,
 }: {
   control: Control<PlaygroundForm>;
-  headers: Header[];
+  schemaHeaders: Header[];
+  lockedHeaders?: string[];
 }) => {
   const { fields, append, remove } = useFieldArray<PlaygroundForm, "headers">({
     control,
     name: "headers",
   });
-  const { setValue, watch } = useFormContext<PlaygroundForm>();
+  const { setValue, watch, formState } = useFormContext<PlaygroundForm>();
   const valueRefs = useRef<Array<HTMLInputElement | null>>([]);
   const nameRefs = useRef<Array<HTMLInputElement | null>>([]);
   const watchedHeaders = watch("headers");
 
-  const addNewHeader = useCallback(() => {
-    append({ name: "", value: "", active: false });
-  }, [append]);
+  const addNewHeader = useCallback(
+    (e?: React.MouseEvent<HTMLButtonElement>) => {
+      e?.stopPropagation();
+      append({ name: "", value: "", active: false }, { shouldFocus: true });
+    },
+    [append],
+  );
 
   useEffect(() => {
     if (watchedHeaders.length === 0) {
@@ -82,120 +100,204 @@ export const Headers = ({
     .filter((h) => !watchedHeaders.some((f) => f.name === h.name))
     .map(({ name }) => name);
 
+  const hiddenHeadersIndex = fields.flatMap((f, index) => {
+    const keep = !lockedHeaders
+      ?.map((h) => h.toLowerCase())
+      .includes(f.name.toLowerCase());
+
+    return keep ? [] : [index];
+  });
+
+  const lockedHeaderFields =
+    lockedHeaders?.map((h) => ({
+      name: h,
+      id: `locked-${h}`,
+      value: "••••••••••",
+      active: true,
+      locked: true,
+    })) ?? [];
+
   return (
-    <div className="flex flex-col gap-2">
-      <Card className="overflow-hidden">
-        <ParamsGrid>
-          {fields.map((field, i) => {
-            const currentHeader = schemaHeaders.find(
-              (h) => h.name === watch(`headers.${i}.name`),
-            );
-            return (
-              <ParamsGridItem key={field.id}>
-                <div className="flex items-center gap-2 ">
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.active`}
-                    render={({ field }) => (
-                      <Checkbox
-                        id={`headers.${i}.active`}
-                        checked={field.value}
-                        onCheckedChange={(checked) => {
-                          field.onChange(checked);
-                        }}
-                      />
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.name`}
-                    render={({ field }) => (
-                      <Autocomplete
-                        {...field}
-                        placeholder="Name"
-                        className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
-                        options={[...missingHeaders, ...headerOptions]}
-                        onEnterPress={() => handleHeaderEnter(i)}
-                        onChange={(e) => {
-                          field.onChange(e);
-                          setValue(`headers.${i}.active`, true);
-                        }}
-                        ref={(el) => {
-                          nameRefs.current[i] = el;
-                        }}
-                      />
+    <Collapsible defaultOpen>
+      <CollapsibleHeaderTrigger>
+        <TableOfContentsIcon size={16} />
+        <CollapsibleHeader>Headers</CollapsibleHeader>
+        <Button
+          onClick={addNewHeader}
+          type="button"
+          size="sm"
+          variant="ghost"
+          className="hover:bg-accent hover:brightness-95 flex gap-2"
+        >
+          Add header <PlusCircleIcon size={16} />
+        </Button>
+      </CollapsibleHeaderTrigger>
+      <CollapsibleContent className="CollapsibleContent">
+        <div className="flex flex-col gap-2">
+          <div className="overflow-hidden">
+            <ParamsGrid>
+              {lockedHeaderFields.map((field) => {
+                return (
+                  <Tooltip key={field.id}>
+                    <TooltipTrigger asChild>
+                      <ParamsGridItem
+                        key={field.id}
+                        className="opacity-50 cursor-not-allowed font-mono text-xs min-h-10"
+                      >
+                        <LockIcon size={16} />
+                        <Input
+                          value={field.name}
+                          disabled
+                          className="w-full border-0 p-0 m-0 shadow-none text-xs focus-visible:ring-0 font-mono"
+                        />
+                        <div>{field.value}</div>
+                      </ParamsGridItem>
+                    </TooltipTrigger>
+                    <TooltipContent
+                      alignOffset={10}
+                      side="bottom"
+                      align="start"
+                    >
+                      <p>This header is set by the selected authentication.</p>
+                    </TooltipContent>
+                  </Tooltip>
+                );
+              })}
+              {fields.map((field, i) => {
+                const currentSchemaHeader = schemaHeaders.find(
+                  (h) => h.name === watchedHeaders.at(i)?.name,
+                );
+                return (
+                  <ParamsGridItem
+                    key={field.id}
+                    className={cn(
+                      hiddenHeadersIndex.includes(i) && "text-amber-600",
+                      hiddenHeadersIndex.includes(i) &&
+                        !formState.dirtyFields.headers?.[i]?.value &&
+                        "hidden",
                     )}
-                  />
-                </div>
-                <div className="flex items-center gap-2">
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.value`}
-                    render={({ field }) => {
-                      const hasEnum =
-                        currentHeader?.enum && currentHeader.enum.length > 0;
-
-                      if (!hasEnum) {
-                        return (
-                          <Input
-                            placeholder="Value"
-                            className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
-                            {...field}
-                            ref={(el) => {
-                              valueRefs.current[i] = el;
-                            }}
-                            onKeyDown={(e) => {
-                              if (
-                                e.key === "Enter" &&
-                                e.currentTarget.value.trim()
-                              ) {
-                                handleValueEnter(i);
-                              }
+                  >
+                    <Controller
+                      control={control}
+                      name={`headers.${i}.active`}
+                      render={({ field }) => (
+                        <>
+                          <Checkbox
+                            id={`headers.${i}.active`}
+                            className={cn(
+                              hiddenHeadersIndex.includes(i) && "hidden",
+                            )}
+                            checked={field.value}
+                            onCheckedChange={(checked) => {
+                              field.onChange(checked);
                             }}
-                            autoComplete="off"
                           />
-                        );
-                      }
-
-                      return (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <CircleAlertIcon
+                                className={cn(
+                                  "text-amber-600",
+                                  !hiddenHeadersIndex.includes(i) && "hidden",
+                                )}
+                                size={16}
+                              />
+                            </TooltipTrigger>
+                            <TooltipContent
+                              alignOffset={10}
+                              side="bottom"
+                              align="start"
+                            >
+                              <p>
+                                This header will be overwritten by the selected
+                                authentication.
+                              </p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </>
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name={`headers.${i}.name`}
+                      render={({ field }) => (
                         <Autocomplete
-                          shouldFilter={false}
-                          value={field.value}
-                          options={currentHeader.enum ?? []}
+                          {...field}
+                          placeholder="Name"
+                          className="border-0 p-0 m-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
+                          options={[...missingHeaders, ...headerOptions]}
+                          onEnterPress={() => handleHeaderEnter(i)}
                           onChange={(e) => {
                             field.onChange(e);
                             setValue(`headers.${i}.active`, true);
                           }}
-                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
+                          ref={(el) => {
+                            nameRefs.current[i] = el;
+                          }}
                         />
-                      );
-                    }}
-                  />
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    className="text-muted-foreground opacity-0 group-hover:opacity-100 rounded-full w-8 h-7"
-                    onClick={() => remove(i)}
-                    type="button"
-                  >
-                    <XIcon size={16} />
-                  </Button>
-                </div>
-              </ParamsGridItem>
-            );
-          })}
-        </ParamsGrid>
-      </Card>
-      <div className="text-end">
-        <Button
-          className=""
-          onClick={addNewHeader}
-          type="button"
-          variant="secondary"
-        >
-          Add header
-        </Button>
-      </div>
-    </div>
+                      )}
+                    />
+                    <div className="flex items-center gap-2">
+                      <Controller
+                        control={control}
+                        name={`headers.${i}.value`}
+                        render={({ field }) => {
+                          const hasEnum =
+                            currentSchemaHeader?.enum &&
+                            currentSchemaHeader.enum.length > 0;
+
+                          if (!hasEnum) {
+                            return (
+                              <Input
+                                placeholder="Value"
+                                className="w-full truncate border-0 p-0 m-0 shadow-none text-xs focus-visible:ring-0 font-mono"
+                                autoComplete="off"
+                                {...field}
+                                ref={(el) => {
+                                  valueRefs.current[i] = el;
+                                }}
+                                onKeyDown={(e) => {
+                                  if (
+                                    e.key === "Enter" &&
+                                    e.currentTarget.value.trim()
+                                  ) {
+                                    handleValueEnter(i);
+                                  }
+                                }}
+                              />
+                            );
+                          }
+
+                          return (
+                            <Autocomplete
+                              shouldFilter={false}
+                              value={field.value}
+                              options={currentSchemaHeader.enum ?? []}
+                              onChange={(e) => {
+                                field.onChange(e);
+                                setValue(`headers.${i}.active`, true);
+                              }}
+                              className="border-0 p-0 m-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
+                            />
+                          );
+                        }}
+                      />
+                      <Button
+                        size="icon-xs"
+                        variant="ghost"
+                        className="text-muted-foreground opacity-0 group-hover:brightness-95 group-hover:opacity-100"
+                        onClick={() => remove(i)}
+                        type="button"
+                      >
+                        <XIcon size={16} />
+                      </Button>
+                    </div>
+                  </ParamsGridItem>
+                );
+              })}
+            </ParamsGrid>
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
   );
 };

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

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
+import { Card } from "zudoku/ui/Card.js";
 import { Checkbox } from "zudoku/ui/Checkbox.js";
 import {
   Dialog,
@@ -39,13 +40,13 @@ const IdentityDialog = ({
         <DialogDescription>
           Please select an identity for this request.
         </DialogDescription>
-        <div className="max-h-80 overflow-auto">
+        <Card className="max-h-80 overflow-auto">
           <IdentitySelector
             identities={identities}
             setValue={setIdentity}
             value={identity}
           />
-        </div>
+        </Card>
         <DialogFooter className="flex flex-col gap-2">
           <div className="flex items-center gap-2">
             <Checkbox

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

@@ -1,4 +1,3 @@
-import { Card } from "zudoku/ui/Card.js";
 import { Label } from "zudoku/ui/Label.js";
 import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
 import { type ApiIdentity } from "../../../core/ZudokuContext.js";
@@ -13,7 +12,7 @@ const IdentitySelector = ({
   setValue: (value: string) => void;
   value?: string;
 }) => (
-  <Card className="w-full overflow-hidden">
+  <div className="w-full overflow-hidden">
     <RadioGroup
       onValueChange={(value) => setValue(value)}
       value={value}
@@ -21,21 +20,19 @@ const IdentitySelector = ({
       className="gap-0"
       disabled={identities?.length === 0}
     >
-      <Label className="h-12 border-b items-center flex gap-2 p-4 cursor-pointer hover:bg-accent">
-        <RadioGroupItem value={NO_IDENTITY} id="none" />
-        <span>None</span>
-      </Label>
-      {identities?.map((identity) => (
-        <Label
-          key={identity.id}
-          className="h-12 border-b items-center flex gap-2 p-4 cursor-pointer hover:bg-accent"
-        >
-          <RadioGroupItem value={identity.id} id={identity.id} />
-          <span>{identity.label}</span>
-        </Label>
-      ))}
+      {[{ id: NO_IDENTITY, label: "None" }, ...(identities ?? [])].map(
+        (identity) => (
+          <Label
+            key={identity.id}
+            className="h-10 items-center border-b font-normal flex gap-4 p-4 cursor-pointer hover:bg-accent/75"
+          >
+            <RadioGroupItem value={identity.id} id={identity.id} />
+            <span>{identity.label}</span>
+          </Label>
+        ),
+      )}
     </RadioGroup>
-  </Card>
+  </div>
 );
 
 export default IdentitySelector;

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

@@ -2,5 +2,5 @@ import createVariantComponent from "../../../util/createVariantComponent.js";
 
 export const InlineInput = createVariantComponent(
   "input",
-  "px-2 bg-transparent h-6 font-mono text-xs m-2",
+  "bg-transparent h-9 font-mono text-xs",
 );

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

@@ -2,12 +2,12 @@ import createVariantComponent from "../../../util/createVariantComponent.js";
 
 const ParamsGrid = createVariantComponent(
   "div",
-  "grid grid-cols-[2fr_3fr] gap-2 items-center",
+  "grid grid-cols-[min-content_2fr_3fr] items-center gap-x-5",
 );
 
 export const ParamsGridItem = createVariantComponent(
   "div",
-  "group hover:bg-accent px-3 grid col-span-full grid-cols-subgrid",
+  "group h-9 hover:bg-accent/75 ps-4 pe-2 grid col-span-full grid-cols-subgrid items-center border-b",
 );
 
 export default ParamsGrid;

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

@@ -1,5 +1,4 @@
 import { type Control, Controller, useFieldArray } from "react-hook-form";
-import { Card } from "zudoku/ui/Card.js";
 import { Input } from "../../../ui/Input.js";
 import { ColorizedParam } from "../ColorizedParam.js";
 import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
@@ -22,7 +21,7 @@ export const PathParams = ({
   );
 
   return (
-    <Card className="rounded-lg">
+    <div className="overflow-hidden">
       <ParamsGrid>
         {sortedFields.map((field, i) => (
           <ParamsGridItem key={field.id}>
@@ -48,8 +47,8 @@ export const PathParams = ({
                   <Input
                     {...field}
                     required
-                    placeholder="Enter value"
-                    className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
+                    placeholder="Value"
+                    className="w-full truncate border-0 p-0 m-0 shadow-none text-xs font-mono focus-visible:ring-0"
                   />
                 )}
               />
@@ -57,6 +56,6 @@ export const PathParams = ({
           </ParamsGridItem>
         ))}
       </ParamsGrid>
-    </Card>
+    </div>
   );
 };