zudoku 0.0.0-f0602bf → 0.0.0-f0b4321

package/src/lib/hooks/useHotkey.ts

@@ -0,0 +1,70 @@
+import { useEffect, useRef } from "react";
+import { isAppleDevice } from "../util/os.js";
+
+const keymap = {
+  other: {
+    alt: "Alt",
+    meta: "Ctrl",
+    ctrl: "Ctrl",
+    shift: "⇧",
+    option: "Alt",
+  },
+  apple: {
+    alt: "⌥",
+    meta: "⌘",
+    ctrl: "Ctrl",
+    shift: "⇧",
+    option: "⌥",
+  },
+};
+
+export const useHotkey = (hotkey: string, callback: () => void) => {
+  const hotkeySanitized = hotkey.toLowerCase().split("+");
+  const meta = hotkeySanitized.includes("meta");
+  const shift = hotkeySanitized.includes("shift");
+  const alt =
+    hotkeySanitized.includes("option") || hotkeySanitized.includes("alt");
+  const ctrl = hotkeySanitized.includes("ctrl");
+
+  const key = hotkey.split("+").pop();
+
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (
+        (event.code === `Key${key?.toUpperCase()}` ||
+          event.code.toLowerCase() === key?.toLowerCase()) &&
+        event.metaKey === meta &&
+        event.shiftKey === shift &&
+        event.altKey === alt &&
+        event.ctrlKey === ctrl
+      ) {
+        event.preventDefault();
+        callbackRef.current();
+      }
+    };
+
+    window.addEventListener("keydown", handler);
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, [key, meta, shift, alt, ctrl]);
+
+  return {
+    trigger: () => callbackRef.current(),
+    label: hotkeySanitized.map((key: string) =>
+      key === "meta" ||
+      key === "ctrl" ||
+      key === "alt" ||
+      key === "shift" ||
+      key === "option"
+        ? keymap[isAppleDevice() ? "apple" : "other"][key]
+        : key,
+    ),
+  };
+};

package/src/lib/plugins/api-catalog/Catalog.tsx

@@ -13,7 +13,7 @@ export const Catalog = ({
   filterCatalogItems = (items) => items,
   label = "API Library",
   categoryLabel,
-}: Omit<ApiCatalogPluginOptions, "navigationId"> & {
+}: Omit<ApiCatalogPluginOptions, "path"> & {
   categoryLabel?: string;
 }) => {
   const auth = useAuthState();

package/src/lib/plugins/api-catalog/index.tsx

@@ -1,6 +1,6 @@
 import slugify from "@sindresorhus/slugify";
 import { matchPath } from "react-router";
-import type { SidebarItem } from "../../../config/validators/SidebarSchema.js";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import type { AuthState } from "../../authentication/state.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 import { joinUrl } from "../../util/joinUrl.js";
@@ -22,46 +22,46 @@ export type CatalogCategory = {
 };
 
 export type ApiCatalogPluginOptions = {
-  navigationId: string;
+  path: string;
   label: string;
   categories?: CatalogCategory[];
   items: ApiCatalogItem[];
-  filterCatalogItems?: filterCatalogItems;
+  filterCatalogItems?: FilterCatalogItemsFn;
 };
 
 export type CatalogContext<ProviderData = unknown> = {
   auth: AuthState<ProviderData>;
 };
 
-export type filterCatalogItems<ProviderData = unknown> = (
+export type FilterCatalogItemsFn<ProviderData = unknown> = (
   items: ApiCatalogItem[],
   { auth }: CatalogContext<ProviderData>,
 ) => ApiCatalogItem[];
 
 export const apiCatalogPlugin = ({
-  navigationId,
+  path,
   items,
   label,
   categories = [],
   filterCatalogItems,
 }: {
-  navigationId: string;
+  path: string;
   label: string;
   categories?: CatalogCategory[];
   items: ApiCatalogItem[];
-  filterCatalogItems?: filterCatalogItems;
+  filterCatalogItems?: FilterCatalogItemsFn;
 }): ZudokuPlugin => {
   const paths = Object.fromEntries(
     categories.flatMap((category) =>
       [undefined, ...category.tags].map((tag) => [
-        joinUrl(navigationId, tag ? getKey(category.label, tag) : undefined),
+        joinUrl(path, tag ? getKey(category.label, tag) : undefined),
         tag,
       ]),
     ),
   );
 
   return {
-    getSidebar: async (currentPath) => {
+    getNavigation: async (currentPath) => {
       const matches = Object.keys(paths).some((path) =>
         matchPath(path, currentPath),
       );
@@ -70,13 +70,13 @@ export const apiCatalogPlugin = ({
         return [];
       }
 
-      const sidebar: SidebarItem[] = categories.map((category) => ({
-        type: "category" as const,
+      const navigation: NavigationItem[] = categories.map((category) => ({
+        type: "category",
         label: category.label,
         collapsible: false,
         items: category.tags.map((tag) => ({
-          type: "doc" as const,
-          id: joinUrl(navigationId, getKey(category.label, tag)),
+          type: "link",
+          to: joinUrl(path, getKey(category.label, tag)),
           label: tag,
           badge: {
             label: String(
@@ -84,19 +84,19 @@ export const apiCatalogPlugin = ({
                 api.categories.find((c) => c.tags.includes(tag)),
               ).length,
             ),
-            color: "outline" as const,
+            color: "outline",
           },
         })),
       }));
 
-      sidebar.unshift({
-        type: "doc" as const,
-        id: joinUrl(navigationId),
+      navigation.unshift({
+        type: "link",
+        to: joinUrl(path),
         label: "Overview",
-        badge: { label: String(items.length), color: "outline" as const },
+        badge: { label: String(items.length), color: "outline" },
       });
 
-      return sidebar;
+      return navigation;
     },
     getRoutes: () =>
       Object.entries(paths).map(([path, tag]) => ({

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

@@ -3,18 +3,21 @@ import {
   useQueryClient,
   useSuspenseQuery,
 } from "@tanstack/react-query";
-import { AnimatePresence, motion } from "framer-motion";
 import {
   CheckIcon,
+  CircleSlashIcon,
   CopyIcon,
   EyeIcon,
   EyeOffIcon,
-  LoaderPinwheelIcon,
-  RotateCwIcon,
+  PencilLineIcon,
+  RefreshCwIcon,
   TrashIcon,
+  XIcon,
 } from "lucide-react";
-import { useState } from "react";
+import { AnimatePresence } from "motion/react";
+import React, { useState } from "react";
 import { Link } from "react-router";
+import { Alert, AlertTitle } from "zudoku/ui/Alert.js";
 import { Card, CardHeader } from "zudoku/ui/Card.js";
 import {
   Dialog,
@@ -29,13 +32,19 @@ import {
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { Slot } from "../../components/Slot.js";
 import { Button } from "../../ui/Button.js";
+import { Input } from "../../ui/Input.js";
 import { cn } from "../../util/cn.js";
-import { type ApiKey, type ApiKeyService } from "./index.js";
+import { useCopyToClipboard } from "../../util/useCopyToClipboard.js";
+import { type ApiConsumer, type ApiKey, type ApiKeyService } from "./index.js";
 
 export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
   const context = useZudoku();
   const queryClient = useQueryClient();
-  const { data } = useSuspenseQuery({
+  const [editingConsumerId, setEditingConsumerId] = useState<string | null>(
+    null,
+  );
+  const [editingLabel, setEditingLabel] = useState<string>("");
+  const { data, isFetching } = useSuspenseQuery({
     queryFn: () => service.getConsumers(context),
     queryKey: ["api-keys"],
     retry: false,
@@ -55,6 +64,80 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
 
       return service.deleteKey(consumerId, keyId, context);
     },
+    onMutate: async ({ consumerId, keyId }) => {
+      await queryClient.cancelQueries({ queryKey: ["api-keys"] });
+      const previousData = queryClient.getQueryData<ApiConsumer[]>([
+        "api-keys",
+      ]);
+      queryClient.setQueryData<ApiConsumer[]>(["api-keys"], (old) => {
+        if (!old) {
+          return old;
+        }
+
+        return old.map((consumer) => {
+          if (consumer.id === consumerId) {
+            return {
+              ...consumer,
+              apiKeys: consumer.apiKeys.filter((key) => key.id !== keyId),
+            };
+          }
+          return consumer;
+        });
+      });
+
+      return { previousData };
+    },
+    onError: (err, variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData(["api-keys"], context.previousData);
+      }
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["api-keys"] });
+    },
+  });
+
+  const updateConsumerMutation = useMutation({
+    mutationFn: ({
+      consumerId,
+      label,
+    }: {
+      consumerId: string;
+      label: string;
+    }) => {
+      if (!service.updateConsumer) {
+        throw new Error("updateConsumer not implemented");
+      }
+
+      return service.updateConsumer({ id: consumerId, label }, context);
+    },
+    onMutate: async ({ consumerId, label }) => {
+      await queryClient.cancelQueries({ queryKey: ["api-keys"] });
+
+      const previousData = queryClient.getQueryData(["api-keys"]);
+      queryClient.setQueryData<ApiConsumer[]>(["api-keys"], (old) => {
+        if (!old) {
+          return old;
+        }
+
+        return old.map((consumer) => {
+          if (consumer.id === consumerId) {
+            return {
+              ...consumer,
+              label,
+            };
+          }
+          return consumer;
+        });
+      });
+
+      return { previousData };
+    },
+    onError: (err, variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData(["api-keys"], context.previousData);
+      }
+    },
     onSuccess: () => {
       void queryClient.invalidateQueries({ queryKey: ["api-keys"] });
     },
@@ -71,8 +154,29 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ["api-keys"] }),
   });
 
+  const handleStartEdit = (consumerId: string, currentLabel: string) => {
+    setEditingConsumerId(consumerId);
+    setEditingLabel(currentLabel);
+  };
+
+  const handleSaveEdit = (consumerId: string) => {
+    if (editingLabel.trim()) {
+      updateConsumerMutation.mutate({
+        consumerId,
+        label: editingLabel.trim(),
+      });
+    }
+    setEditingConsumerId(null);
+    setEditingLabel("");
+  };
+
+  const handleCancelEdit = () => {
+    setEditingConsumerId(null);
+    setEditingLabel("");
+  };
+
   return (
-    <div className="max-w-screen-lg h-full pt-(--padding-content-top) pb-(--padding-content-bottom)">
+    <div className="max-w-screen-md h-full pt-(--padding-content-top) pb-(--padding-content-bottom)">
       <Slot.Target name="api-keys-list-page" />
 
       <div className="flex justify-between pb-3">
@@ -86,15 +190,32 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
       <p>Create, manage, and monitor your API keys</p>
 
       <Slot.Target name="api-keys-list-page-before-keys" />
-
       <div className="h-8"></div>
-      <div className="grid grid-cols-8">
+      {rollKeyMutation.isError && (
+        <Alert variant="destructive" className="mb-4">
+          <CircleSlashIcon size={16} />
+          <AlertTitle>{rollKeyMutation.error.message}</AlertTitle>
+        </Alert>
+      )}
+      {updateConsumerMutation.isError && (
+        <Alert variant="destructive" className="mb-4">
+          <CircleSlashIcon size={16} />
+          <AlertTitle>{updateConsumerMutation.error.message}</AlertTitle>
+        </Alert>
+      )}
+      {deleteKeyMutation.isError && (
+        <Alert variant="destructive" className="mb-4">
+          <CircleSlashIcon size={16} />
+          <AlertTitle>{deleteKeyMutation.error.message}</AlertTitle>
+        </Alert>
+      )}
+      <div className="">
         {data.length === 0 ? (
-          <div className="flex flex-col justify-center gap-4 items-center p-8 border rounded-sm bg-muted/30 text-muted-foreground">
+          <div className="flex col-span-full flex-col justify-center gap-4 items-center p-8 border rounded-sm bg-muted/30 text-muted-foreground">
             <p className="text-center">
-              No API keys created yet.
+              You have no API keys yet.
               <br />
-              Get started and create your first key.
+              {service.createKey && "Get started and create your first key."}
             </p>
             {service.createKey && (
               <Button asChild variant="outline">
@@ -105,19 +226,54 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
         ) : (
           <ul
             className={cn(
-              "grid grid-cols-1 divide-y divide-border col-span-6",
-              "lg:grid-cols-[1fr_min-content]",
+              "grid grid-cols-[1fr_min-content] divide-y divide-border col-span-6",
             )}
           >
             {data.map((consumers) => (
               <Card
-                className="grid grid-cols-subgrid col-span-full items-center mb-4"
+                className="grid grid-cols-subgrid col-span-full items-center mb-4 group"
                 key={consumers.id}
               >
                 <CardHeader className="border-b col-span-full grid-cols-subgrid grid">
-                  <div className="flex flex-col text-sm justify-center">
-                    <div className="font-medium text-lg">
-                      {consumers.name ?? consumers.id}
+                  <div className="h-10 flex flex-col text-sm justify-center">
+                    <div className="font-medium text-lg flex items-center gap-2">
+                      {editingConsumerId === consumers.id ? (
+                        <div className="flex items-center gap-2 w-full">
+                          <Input
+                            maxLength={32}
+                            value={editingLabel}
+                            onChange={(e) => setEditingLabel(e.target.value)}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter") {
+                                handleSaveEdit(consumers.id);
+                              } else if (e.key === "Escape") {
+                                handleCancelEdit();
+                              }
+                            }}
+                            className="text-lg font-medium"
+                            autoFocus
+                          />
+                          <div className="flex items-center">
+                            <Button
+                              size="icon"
+                              variant="ghost"
+                              onClick={() => handleSaveEdit(consumers.id)}
+                              disabled={!editingLabel.trim()}
+                            >
+                              <CheckIcon size={16} />
+                            </Button>
+                            <Button
+                              size="icon"
+                              variant="ghost"
+                              onClick={handleCancelEdit}
+                            >
+                              <XIcon size={16} />
+                            </Button>
+                          </div>
+                        </div>
+                      ) : (
+                        <>{consumers.label}</>
+                      )}
                       <div className="text-muted-foreground text-xs">
                         {consumers.createdOn}
                       </div>
@@ -139,16 +295,41 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                   </div>
 
                   <div className="flex justify-end">
+                    {service.updateConsumer && (
+                      <Button
+                        variant="ghost"
+                        onClick={() =>
+                          handleStartEdit(consumers.id, consumers.label)
+                        }
+                        className={cn(
+                          "flex gap-2",
+                          editingConsumerId === consumers.id &&
+                            "opacity-0! pointer-events-none",
+                        )}
+                        disabled={editingConsumerId === consumers.id}
+                      >
+                        <PencilLineIcon size={16} />
+                        <span className="hidden md:block">Edit label</span>
+                      </Button>
+                    )}
                     {service.rollKey && (
                       <Dialog>
                         <DialogTrigger asChild>
                           <Button
-                            size="icon"
                             title="Roll this key"
                             variant="ghost"
                             disabled={rollKeyMutation.isPending}
+                            className="flex items-center gap-2"
                           >
-                            <RotateCwIcon size={16} />
+                            <RefreshCwIcon
+                              size={16}
+                              className={
+                                rollKeyMutation.isPending
+                                  ? "animate-spin"
+                                  : undefined
+                              }
+                            />
+                            <span className="hidden md:block">Roll key</span>
                           </Button>
                         </DialogTrigger>
                         <DialogContent>
@@ -177,36 +358,27 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                     )}
                   </div>
                 </CardHeader>
-                <div className="divide-y col-span-full grid-cols-subgrid grid">
+                <div className="col-span-full grid-cols-subgrid grid">
                   <AnimatePresence>
-                    {rollKeyMutation.isPending && (
-                      <motion.div
-                        className={cn(
-                          "flex col-span-full items-center gap-2 px-6 py-1 text-xs bg-muted/30 font-medium",
-                        )}
-                        initial={{ opacity: 0, y: 0 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        exit={{ opacity: 0, y: 0 }}
-                        transition={{ duration: 0.3 }}
-                      >
-                        <LoaderPinwheelIcon
-                          size={16}
-                          className="animate-spin opacity-80"
-                        />
-                        Rolling key...
-                      </motion.div>
-                    )}
                     {consumers.apiKeys.map((apiKey) => (
-                      <RevealApiKey
-                        key={apiKey.id}
-                        apiKey={apiKey}
-                        onDeleteKey={() => {
-                          deleteKeyMutation.mutate({
-                            consumerId: consumers.id,
-                            keyId: apiKey.id,
-                          });
-                        }}
-                      />
+                      <React.Fragment key={apiKey.id}>
+                        <RevealApiKey
+                          apiKey={apiKey}
+                          onDeleteKey={() => {
+                            deleteKeyMutation.mutate({
+                              consumerId: consumers.id,
+                              keyId: apiKey.id,
+                            });
+                          }}
+                          className={
+                            deleteKeyMutation.variables?.keyId === apiKey.id &&
+                            (deleteKeyMutation.isPending || isFetching)
+                              ? "opacity-10!"
+                              : undefined
+                          }
+                        />
+                        <div className="col-span-full h-px bg-border"></div>
+                      </React.Fragment>
                     ))}
                   </AnimatePresence>
                 </div>
@@ -241,12 +413,14 @@ const getTimeAgo = (date: string) => {
 const RevealApiKey = ({
   apiKey,
   onDeleteKey,
+  className,
 }: {
   apiKey: ApiKey;
   onDeleteKey: () => void;
+  className?: string;
 }) => {
   const [revealed, setRevealed] = useState(false);
-  const [copied, setCopied] = useState(false);
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
 
   const { key, createdOn, expiresOn } = apiKey;
   const isExpired = expiresOn && new Date(expiresOn) < new Date();
@@ -259,29 +433,28 @@ const RevealApiKey = ({
   const expiresSoon = daysUntilExpiry <= 7 && !isExpired;
 
   return (
-    <motion.div
-      className="grid col-span-full grid-cols-subgrid p-6"
-      initial={{ opacity: 0, y: 0 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: 0 }}
-      transition={{ duration: 0.3 }}
-    >
+    <div className={cn("grid col-span-full grid-cols-subgrid p-6", className)}>
       <div className="flex flex-col gap-1">
-        <div className="flex gap-2 items-center text-sm border rounded-md w-fit px-1">
-          <div className="font-mono truncate h-9 items-center flex px-2 text-xs gap-2">
+        <div className="flex gap-2 items-center text-sm border rounded-md w-full max-w-fit px-1">
+          <div className="font-mono w-full h-9 items-center flex px-2 text-xs gap-2">
             <div
               className={cn(
                 "rounded-full w-2 h-2 bg-emerald-400 mr-2",
                 (expiresSoon || isExpired) && "bg-neutral-200",
               )}
             ></div>
-            <span>
-              <span className={revealed ? "" : "opacity-20"}>
+            <span className="w-full truncate">
+              <div
+                className={cn(
+                  "w-40 inline-block md:w-full truncate",
+                  revealed ? "" : "opacity-20",
+                )}
+              >
                 {revealed
                   ? key.slice(0, -5)
                   : "**** ".repeat(key.slice(0, -5).length / 5) +
                     "*".repeat(key.slice(0, -5).length % 5)}
-              </span>
+              </div>
               <span>{key.slice(-5)}</span>
             </span>
           </div>
@@ -294,15 +467,10 @@ const RevealApiKey = ({
           </Button>
           <Button
             variant="ghost"
-            onClick={() => {
-              void navigator.clipboard.writeText(key).then(() => {
-                setCopied(true);
-                setTimeout(() => setCopied(false), 2000);
-              });
-            }}
+            onClick={() => copyToClipboard(key)}
             size="icon"
           >
-            {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+            {isCopied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
           </Button>
         </div>
         <div className="flex gap-1 mt-0.5 text-nowrap">
@@ -328,7 +496,7 @@ const RevealApiKey = ({
         </div>
       </div>
       <div className="flex justify-end">
-        {isExpired && onDeleteKey && (
+        {expiresOn && onDeleteKey && (
           <Dialog>
             <DialogTrigger asChild>
               <Button variant="ghost" size="icon">
@@ -360,6 +528,6 @@ const RevealApiKey = ({
           </Dialog>
         )}
       </div>
-    </motion.div>
+    </div>
   );
 };