zudoku 0.3.0-dev.6 → 0.3.0-dev.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.6",
+  "version": "0.3.0-dev.8",
   "type": "module",
   "files": [
     "dist",

package/src/lib/components/Header.tsx

@@ -1,4 +1,4 @@
-import { MoonStarIcon, SearchIcon, SunIcon } from "lucide-react";
+import { MoonStarIcon, SunIcon } from "lucide-react";
 import { memo } from "react";
 
 import { useAuth } from "../authentication/hook.js";
@@ -27,7 +27,7 @@ export const Header = memo(function HeaderInner() {
           </div>
           <div className="grid grid-cols-[--sidecar-grid-cols] items-center gap-8">
             <div className="w-full max-w-prose">
-              <button className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72">
+              {/*<button className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72">
                 <div className="flex items-center gap-2 flex-grow">
                   <SearchIcon size={14} />
                   Search
@@ -35,7 +35,7 @@ export const Header = memo(function HeaderInner() {
                 <kbd className="absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
                   ⌘K
                 </kbd>
-              </button>
+              </button>*/}
             </div>
 
             <div className="items-center justify-self-end text-sm hidden lg:flex">

package/src/lib/components/SyntaxHighlight.tsx

@@ -21,6 +21,10 @@ if (!import.meta.env.SSR) {
   import("prismjs/components/prism-json.min.js");
   // @ts-expect-error This is untyped
   import("prismjs/components/prism-java.min.js");
+  // @ts-expect-error This is untyped
+  import("prismjs/components/prism-csharp.min.js");
+  // @ts-expect-error This is untyped
+  import("prismjs/components/prism-objectivec.min.js");
 }
 
 import { useState } from "react";

package/src/lib/plugins/api-key/SettingsApiKeys.tsx

@@ -33,7 +33,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
   });
 
   return (
-    <div className="max-w-screen-lg pt-[--padding-content-top] pb-[--padding-content-bottom]">
+    <div className="max-w-screen-lg h-full pt-[--padding-content-top] pb-[--padding-content-bottom]">
       <div className="flex justify-between mb-4 border-b border-border pb-3">
         <h1 className="font-medium text-2xl">API Keys</h1>
         {service.createKey && (
@@ -43,56 +43,71 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
         )}
       </div>
 
-      <ul className="grid grid-cols-[min-content_1fr_min-content] ">
-        {data.map((key) => (
-          <li
-            className="border-b border-border p-5 grid grid-cols-subgrid col-span-full gap-2 items-center"
-            key={key.id}
-          >
-            <div className="flex flex-col gap-1 text-sm">
-              {key.description ?? key.id}
-              <div className="text-muted-foreground text-xs">
-                {key.createdOn && (
-                  <div>
-                    Created on {new Date(key.createdOn).toLocaleDateString()}
-                  </div>
+      {data.length === 0 ? (
+        <div className="flex flex-col justify-center gap-4 items-center h-1/2 my-8">
+          <div className="text-center">
+            No API keys created yet.
+            <br />
+            Get started and create the first one now
+          </div>
+          {service.createKey && (
+            <Button asChild>
+              <Link to="/settings/api-keys/new">Create API Key</Link>
+            </Button>
+          )}
+        </div>
+      ) : (
+        <ul className="grid grid-cols-[minmax(250px,min-content)_1fr_min-content] ">
+          {data.map((key: any) => (
+            <li
+              className="border-b border-border p-5 grid grid-cols-subgrid col-span-full gap-2 items-center"
+              key={key.id}
+            >
+              <div className="flex flex-col gap-1 text-sm">
+                {key.description ?? key.id}
+                <div className="text-muted-foreground text-xs">
+                  {key.createdOn && (
+                    <div>
+                      Created on {new Date(key.createdOn).toLocaleDateString()}
+                    </div>
+                  )}
+                  {key.expiresOn && (
+                    <div>
+                      Expires on {new Date(key.expiresOn).toLocaleDateString()}
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="items-center flex justify-center">
+                <RevealApiKey apiKey={key.key} />
+              </div>
+              <div className="flex gap-2">
+                {service.rollKey && (
+                  <Button size="icon">
+                    <RotateCwIcon size={16} />
+                  </Button>
                 )}
-                {key.expiresOn && (
-                  <div>
-                    Expires on {new Date(key.expiresOn).toLocaleDateString()}
-                  </div>
+                {service.deleteKey && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => {
+                      if (!confirm("Do you want to delete this key?")) {
+                        return;
+                      }
+
+                      deleteKeyMutation.mutate(key.id);
+                    }}
+                    disabled={deleteKeyMutation.isPending}
+                  >
+                    <TrashIcon size={16} />
+                  </Button>
                 )}
               </div>
-            </div>
-            <div className="items-center flex justify-center">
-              <RevealApiKey apiKey={key.key} />
-            </div>
-            <div className="flex gap-2">
-              {service.rollKey && (
-                <Button size="icon">
-                  <RotateCwIcon size={16} />
-                </Button>
-              )}
-              {service.deleteKey && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => {
-                    if (!confirm("Do you want to delete this key?")) {
-                      return;
-                    }
-
-                    deleteKeyMutation.mutate(key.id);
-                  }}
-                  disabled={deleteKeyMutation.isPending}
-                >
-                  <TrashIcon size={16} />
-                </Button>
-              )}
-            </div>
-          </li>
-        ))}
-      </ul>
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 };

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

@@ -1,53 +1,80 @@
-import { XIcon } from "lucide-react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { TriangleAlertIcon, XIcon } from "lucide-react";
+import {
+  Control,
+  useFieldArray,
+  UseFormRegister,
+  useWatch,
+} from "react-hook-form";
 import { Button } from "../../../ui/Button.js";
+import { cn } from "../../../util/cn.js";
 import { InlineInput } from "./InlineInput.js";
-import type { Header, PlaygroundForm } from "./Playground.js";
+import { NO_IDENTITY, type PlaygroundForm } from "./Playground.js";
 
 export const Headers = ({
   control,
   register,
-  headers,
 }: {
   register: UseFormRegister<PlaygroundForm>;
   control: Control<PlaygroundForm>;
-  headers: Header[];
 }) => {
   const { fields, append, remove } = useFieldArray<PlaygroundForm>({
     control,
     name: "headers",
   });
+  const selectedIdentity = useWatch({ name: "identity", control });
+  const liveHeaders = useWatch({ name: "headers", control });
+
+  const disableAuth = selectedIdentity !== NO_IDENTITY;
+
   return (
     <div className="grid grid-cols-[1fr_1fr_auto]">
-      {fields.map((header, i) => (
-        <div
-          key={header.id}
-          className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
-        >
-          <InlineInput
-            {...register(`headers.${i}.name`)}
-            placeholder="Name"
-            className="peer"
-            autoComplete="off"
-          />
-          <InlineInput
-            placeholder={"Value"}
-            className="peer"
-            {...register(`headers.${i}.value`)}
-            autoComplete="off"
-          />
-          <button
-            className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
-            onClick={() => {
-              remove(i);
-            }}
-            type="button"
+      {fields.map((header, i) => {
+        const isDisabledByAuth =
+          disableAuth && liveHeaders.at(i)?.name === "Authorization";
+
+        return (
+          <div
+            key={header.id}
+            className={cn(
+              "grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group",
+              isDisabledByAuth && "line-through",
+            )}
+            title={
+              isDisabledByAuth
+                ? "This header is disabled because authentication was selected"
+                : undefined
+            }
           >
-            <XIcon size={16} />
-          </button>
-          <div className="col-span-full border-b border-border"></div>
-        </div>
-      ))}
+            <div className="flex gap-2 items-center">
+              <InlineInput
+                {...register(`headers.${i}.name`)}
+                placeholder="Name"
+                className="peer"
+                autoComplete="off"
+              />
+              {isDisabledByAuth && (
+                <TriangleAlertIcon size={16} className="text-amber-500" />
+              )}
+            </div>
+            <InlineInput
+              placeholder={"Value"}
+              className="peer"
+              {...register(`headers.${i}.value`)}
+              autoComplete="off"
+            />
+            <button
+              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+              onClick={() => {
+                remove(i);
+              }}
+              type="button"
+            >
+              <XIcon size={16} />
+            </button>
+            <div className="col-span-full border-b border-border"></div>
+          </div>
+        );
+      })}
       <Button
         className="col-span-full mt-4"
         onClick={() => append({ name: "", value: "" })}

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

@@ -81,7 +81,7 @@ export type PlaygroundForm = {
   identity?: string;
 };
 
-const NO_IDENTITY = "__none";
+export const NO_IDENTITY = "__none";
 
 const Playground = ({
   url,
@@ -121,7 +121,7 @@ const Playground = ({
       const request = new Request(requestUrl, {
         method: method.toUpperCase(),
         headers: Object.fromEntries(
-          data.pathParams
+          data.headers
             .filter((h) => h.name)
             .map((header) => [header.name, header.value]),
         ),
@@ -132,7 +132,6 @@ const Playground = ({
           .find((i) => i.id === data.identity)
           ?.authorizeRequest(request);
       }
-
       const response = await fetch(request);
 
       const body = await response.text();
@@ -263,11 +262,7 @@ const Playground = ({
                     </div>
                   </div>
                   <TabsContent value="headers">
-                    <Headers
-                      control={control}
-                      register={register}
-                      headers={formState.headers}
-                    />
+                    <Headers control={control} register={register} />
                   </TabsContent>
                   <TabsContent value="parameters">
                     <div className="grid grid-cols-[min-content_1fr_1fr_auto]">