unkeyed · chronark · May 9, 2025 · May 8, 2025 · May 8, 2025 · May 9, 2025
@@ -83,7 +83,7 @@ export const RatelimitSetup = () => {
         </Button>
       </div>
 
-      <div className="max-h-[550px] overflow-y-auto px-1">
+      <div className="px-1">
         {fields.map((field, index) => (
           <div key={field.id} className="space-y-4 w-full border-t border-grayA-3 py-6">
             <div className="flex items-center gap-[14px] w-full">

@@ -11,10 +11,6 @@ export const useCreateKey = (
   const trpcUtils = trpc.useUtils();
   const key = trpc.key.create.useMutation({
     onSuccess(data) {
-      toast.success("Key Created Successfully", {
-        description: `Your key ${data.keyId} has been created and is ready to use`,
-        duration: 5000,
-      });
       trpcUtils.api.keys.list.invalidate();
       onSuccess(data);
     },

@@ -36,12 +36,14 @@ export function createIdentityOptions({
                 <div className="border rounded-full flex items-center justify-center border-grayA-6 size-5">
                   <User size="sm-regular" className="text-grayA-11" />
                 </div>
-                <span className="text-accent-12 font-medium text-xs w-[120px] truncate text-left">
-                  {identity.id}
+                <span className="max-w-[200px] truncate font-medium text-accent-12 text-left">
+                  {identity.externalId.length > 15
+                    ? `${identity.externalId.slice(0, 4)}...${identity.externalId.slice(-4)}`
+                    : identity.externalId}
                 </span>
               </div>
-              <span className="w-[200px] truncate text-accent-8 group-hover:text-accent-9 text-left">
-                {identity.externalId}
+              <span className="text-accent-9 text-xs max-w-[120px] truncate text-left">
+                {identity.id}
               </span>
             </div>
           </TooltipTrigger>

@@ -151,7 +151,7 @@ export const CreateKeyDialog = ({
           <NavigableDialogRoot
             isOpen={isSettingsOpen}
             onOpenChange={handleOpenChange}
-            dialogClassName="!min-w-[760px]"
+            dialogClassName="!min-w-[760px] max-h-[90vh] overflow-y-auto"
           >
             <NavigableDialogHeader
               title="New Key"

@@ -3,38 +3,59 @@ import { trpc } from "@/lib/trpc/client";
 
 export const useDeleteKey = (onSuccess?: () => void) => {
   const trpcUtils = trpc.useUtils();
-
   const deleteKey = trpc.key.delete.useMutation({
-    onSuccess() {
-      toast.success("Key Deleted", {
-        description: "Your key has been permanently deleted successfully",
-        duration: 5000,
-      });
+    onSuccess(data, variable) {
+      const deletedCount = data.totalDeleted;
 
-      trpcUtils.api.keys.list.invalidate();
+      if (deletedCount === 1) {
+        toast.success("Key Deleted", {
+          description: "Your key has been permanently deleted successfully",
+          duration: 5000,
+        });
+      } else {
+        toast.success("Keys Deleted", {
+          description: `${deletedCount} keys have been permanently deleted successfully`,
+          duration: 5000,
+        });
+      }
 
+      // If some keys weren't found. Someone might've already deleted them when this is fired.
+      if (data.deletedKeyIds.length < variable.keyIds.length) {
+        const missingCount = variable.keyIds.length - data.deletedKeyIds.length;
+        toast.warning("Some Keys Not Found", {
+          description: `${missingCount} ${
+            missingCount === 1 ? "key was" : "keys were"
+          } not found and could not be deleted.`,
+          duration: 7000,
+        });
+      }
+
+      trpcUtils.api.keys.list.invalidate();
       if (onSuccess) {
         onSuccess();
       }
     },
-    onError(err) {
+    onError(err, variable) {
       const errorMessage = err.message || "";
+      const isPlural = variable.keyIds.length > 1;
+      const keyText = isPlural ? "keys" : "key";
 
       if (err.data?.code === "NOT_FOUND") {
         toast.error("Key Deletion Failed", {
-          description: "Unable to find the key. Please refresh and try again.",
+          description: `Unable to find the ${keyText}. Please refresh and try again.`,
         });
       } else if (err.data?.code === "INTERNAL_SERVER_ERROR") {
         toast.error("Server Error", {
-          description:
-            "We encountered an issue while deleting your key. Please try again later or contact support at support.unkey.dev",
+          description: `We encountered an issue while deleting your ${keyText}. Please try again later or contact support at support.unkey.dev`,
         });
       } else if (err.data?.code === "FORBIDDEN") {
         toast.error("Permission Denied", {
-          description: "You don't have permission to delete this key.",
+          description: `You don't have permission to delete ${
+            isPlural ? "these keys" : "this key"
+          }.`,
         });
       } else {
-        toast.error("Failed to Delete Key", {
+        toast.error(`Failed to Delete ${isPlural ? "Keys" : "Key"}`, {
           description: errorMessage || "An unexpected error occurred. Please try again later.",
           action: {
             label: "Contact Support",

@@ -30,7 +30,7 @@ export const DialogContainer = ({
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent
         className={cn(
-          "drop-shadow-2xl border-gray-4 overflow-hidden !rounded-2xl p-0 gap-0",
+          "drop-shadow-2xl border-gray-4 max-h-[90vh] overflow-y-auto !rounded-2xl p-0 gap-0",
           className,
         )}
         onOpenAutoFocus={(e) => {