From ecca1382578d4b4fd93dcd07f39bfed2c21c4a9d Mon Sep 17 00:00:00 2001
From: Izan Gil <66965250+SrIzan10@users.noreply.github.com>
Date: Tue, 30 Sep 2025 08:06:40 +0200
Subject: [PATCH] chore: listen to enter key

---
 .../settings/bot/[slug]/apikeys.tsx           | 59 +++++++++++--------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/app/(ui)/(protected)/settings/bot/[slug]/apikeys.tsx b/apps/web/src/app/(ui)/(protected)/settings/bot/[slug]/apikeys.tsx
index 40a7a67..9b68868 100644
--- a/apps/web/src/app/(ui)/(protected)/settings/bot/[slug]/apikeys.tsx
+++ b/apps/web/src/app/(ui)/(protected)/settings/bot/[slug]/apikeys.tsx
@@ -28,6 +28,33 @@ export function ApiKeys({ slug }: { slug: string }) {
   );
   const { trigger } = useSWRMutation(`/api/settings/bot/${slug}/apiKey`, createApiKey);
 
+  const apiKeyCreate = () => {
+    if (newApiKeyName.trim().length < 3) {
+      toast.error('API Key name must be at least 3 characters long');
+      return;
+    }
+    if (newApiKeyName.trim().length > 50) {
+      toast.error('API Key name must be at most 50 characters long');
+      return;
+    }
+    trigger({ action: 'create', name: newApiKeyName }).then(
+      async (res: PostResponse) => {
+        if (res.success) {
+          setNewApiKeyName('');
+          await navigator.clipboard
+            .writeText(res.apiKey || '')
+            .then(() => toast.success('API key copied to clipboard'))
+            .catch(() => {
+              alert('Failed to copy API key to clipboard, here it is: ' + res.apiKey);
+            });
+          await mutate();
+        } else {
+          alert(res.error || 'Error creating API key');
+        }
+      }
+    );
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -45,35 +72,15 @@ export function ApiKeys({ slug }: { slug: string }) {
               className="flex-1 mr-2"
               value={newApiKeyName}
               onChange={(e) => setNewApiKeyName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  apiKeyCreate();
+                }
+              }}
             />
             <Button
               size="icon"
-              onClick={() => {
-                if (newApiKeyName.trim().length < 3) {
-                  toast.error('API Key name must be at least 3 characters long');
-                  return;
-                }
-                if (newApiKeyName.trim().length > 50) {
-                  toast.error('API Key name must be at most 50 characters long');
-                  return;
-                }
-                trigger({ action: 'create', name: newApiKeyName }).then(
-                  async (res: PostResponse) => {
-                    if (res.success) {
-                      setNewApiKeyName('');
-                      await navigator.clipboard
-                        .writeText(res.apiKey || '')
-                        .then(() => toast.success('API key copied to clipboard'))
-                        .catch(() => {
-                          alert('Failed to copy API key to clipboard, here it is: ' + res.apiKey);
-                        });
-                      await mutate();
-                    } else {
-                      alert(res.error || 'Error creating API key');
-                    }
-                  }
-                );
-              }}
+              onClick={apiKeyCreate}
             >
               <Plus />
             </Button>