zudoku 0.4.2-dev.0 → 0.4.2-dev.10

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

@@ -3,7 +3,14 @@ import {
   useQueryClient,
   useSuspenseQuery,
 } from "@tanstack/react-query";
-import { EyeIcon, EyeOffIcon, RotateCwIcon, TrashIcon } from "lucide-react";
+import {
+  CheckIcon,
+  CopyIcon,
+  EyeIcon,
+  EyeOffIcon,
+  RotateCwIcon,
+  TrashIcon,
+} from "lucide-react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
@@ -147,6 +154,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
 
 const RevealApiKey = ({ apiKey }: { apiKey: string }) => {
   const [revealed, setRevealed] = useState(false);
+  const [copied, setCopied] = useState(false);
 
   return (
     <div className="flex gap-2 items-center text-sm">
@@ -160,6 +168,18 @@ const RevealApiKey = ({ apiKey }: { apiKey: string }) => {
       >
         {revealed ? <EyeOffIcon size={16} /> : <EyeIcon size={16} />}
       </Button>
+      <Button
+        variant="outline"
+        onClick={() => {
+          navigator.clipboard.writeText(apiKey).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+          });
+        }}
+        size="icon"
+      >
+        {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+      </Button>
     </div>
   );
 };

package/src/lib/plugins/markdown/Toc.tsx

@@ -89,7 +89,7 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
   }, [activeAnchor]);
 
   return (
-    <aside className="sticky top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
+    <aside className="sticky scrollbar top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
       <div className="flex items-center gap-2 font-medium mb-2">
         <ListTreeIcon size={16} />
         On this page

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

@@ -163,7 +163,7 @@ export const openApiPlugin = (
         .filter((tag) => tag.operations.length > 0)
         .map<SidebarItem>((tag) => ({
           type: "category",
-          label: tag.name ?? "",
+          label: tag.name || "Other endpoints",
           collapsible: true,
           collapsed: false,
           items: tag.operations.map((operation) => ({

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

@@ -223,9 +223,13 @@ export const Playground = ({
               </Button>
             </div>
             <Tabs
-              defaultValue={pathParams.length > 0 ? "parameters" : "headers"}
+              defaultValue={
+                queryParams.length + pathParams.length > 0
+                  ? "parameters"
+                  : "headers"
+              }
             >
-              <div className="flex justify-between">
+              <div className="flex flex-wrap gap-1 justify-between">
                 <TabsList>
                   {queryParams.length + pathParams.length > 0 && (
                     <TabsTrigger value="parameters">Parameters</TabsTrigger>
@@ -292,7 +296,7 @@ export const Playground = ({
               </TabsContent>
             </Tabs>
           </div>
-          <div className="flex flex-col gap-4 p-8 bg-muted/70">
+          <div className="p-8 bg-muted/70">
             {queryMutation.error ? (
               <div className="flex flex-col gap-2">
                 {formState.pathParams.some((p) => p.value === "") && (
@@ -325,7 +329,6 @@ export const Playground = ({
                     <div>Size: {queryMutation.data.size} B</div>
                   </div>
                 </div>
-                {/*<UrlDisplay host={host} path={url} />*/}
                 <Tabs defaultValue="response">
                   <TabsList>
                     <TabsTrigger value="response">Response</TabsTrigger>
@@ -343,7 +346,10 @@ export const Playground = ({
                     />
                   </TabsContent>
                   <TabsContent value="headers">
-                    <Card className="grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4">
+                    <Card
+                      // playground dialog has h-5/6 ≈ 83.333vh
+                      className="max-h-[calc(83.333vh-140px)] overflow-y-auto grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4"
+                    >
                       <div className="font-semibold">Key</div>
                       <div className="font-semibold">Value</div>
                       {headerEntries.map(([key, value]) => (

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

@@ -55,7 +55,8 @@ export const ResponseTab = ({
           }
           noBackground
           showLanguageIndicator
-          className="overflow-x-auto p-4 text-xs max-h-[480px]"
+          // playground dialog has h-5/6 ≈ 83.333vh
+          className="overflow-x-auto p-4 text-xs max-h-[calc(83.333vh-180px)]"
           code={view === "raw" ? body : beautifiedBody}
         />
       </Card>

package/lib/DeveloperHint-BQSFXH01.js

@@ -1,10 +0,0 @@
-import "./jsx-runtime-B6kdoens.js";
-const n = ({
-  children: e,
-  className: r
-}) => {
-};
-export {
-  n as D
-};
-//# sourceMappingURL=DeveloperHint-BQSFXH01.js.map

package/lib/DeveloperHint-BQSFXH01.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DeveloperHint-BQSFXH01.js","sources":["../src/lib/components/DeveloperHint.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Callout } from \"../ui/Callout.js\";\n\nexport const DeveloperHint = ({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) => {\n  // TODO: figure out a way to do that in consumer dev mode not \"internal\"\n  //  so this doesn't get stripped out in the build\n  if (!import.meta.env.DEV) return;\n\n  return (\n    <Callout type=\"caution\" title=\"Developer hint\" className={className}>\n      <div className=\"flex flex-col gap-2\">\n        <div>{children}</div>\n        <small className=\"italic\">\n          Note: This hint is only shown in development mode.\n        </small>\n      </div>\n    </Callout>\n  );\n};\n"],"names":["DeveloperHint","children","className"],"mappings":";AAGO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,UAAAC;AAAA,EACA,WAAAC;AACF,MAGM;AAeN;"}