Make the API keys dialog more minimalist and intui...

Author: ctate

components/api-keys-dialog.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { toast } from 'sonner'
-import { Eye, EyeOff, Trash2, Check } from 'lucide-react'
+import { Eye, EyeOff, Trash2, CheckCircle2 } from 'lucide-react'
 
 interface ApiKeysDialogProps {
   open: boolean
@@ -134,61 +134,81 @@ export function ApiKeysDialog({ open, onOpenChange }: ApiKeysDialogProps) {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl">
         <DialogHeader>
-          <DialogTitle>Manage API Keys</DialogTitle>
+          <DialogTitle>API Keys</DialogTitle>
           <DialogDescription>
-            Add your own API keys for AI agents. If not provided, system keys will be used.
+            Configure your own API keys. System defaults will be used if not provided.
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-6 py-4">
+        <div className="space-y-4 py-4">
           {PROVIDERS.map((provider) => (
-            <div key={provider.id} className="space-y-2">
-              <div className="flex items-center justify-between">
-                <Label htmlFor={provider.id} className="font-medium">
-                  {provider.name}
-                </Label>
-                {savedKeys.has(provider.id) && (
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs text-green-600 flex items-center gap-1">
-                      <Check className="h-3 w-3" />
-                      Saved
-                    </span>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => handleDelete(provider.id)}
-                      disabled={loading}
-                      className="h-7 w-7 p-0 text-red-600 hover:text-red-700"
-                      title="Delete API key"
-                    >
-                      <Trash2 className="h-3 w-3" />
-                    </Button>
+            <div
+              key={provider.id}
+              className="group relative rounded-lg border bg-card p-4 transition-colors hover:bg-accent/30"
+            >
+              <div className="flex items-start gap-3">
+                <div className="flex-1 min-w-0 space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor={provider.id} className="text-sm font-medium">
+                      {provider.name}
+                    </Label>
+                    {savedKeys.has(provider.id) && (
+                      <div className="flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-500">
+                        <CheckCircle2 className="h-3.5 w-3.5" />
+                        <span>Configured</span>
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="flex gap-2">
+                    <div className="relative flex-1">
+                      <Input
+                        id={provider.id}
+                        type={showKeys[provider.id] ? 'text' : 'password'}
+                        placeholder={savedKeys.has(provider.id) ? '••••••••••••••••' : provider.placeholder}
+                        value={apiKeys[provider.id]}
+                        onChange={(e) => setApiKeys((prev) => ({ ...prev, [provider.id]: e.target.value }))}
+                        disabled={loading}
+                        className="pr-9 h-8 text-sm"
+                      />
+                      <button
+                        onClick={() => toggleShowKey(provider.id)}
+                        className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                        type="button"
+                        disabled={loading}
+                      >
+                        {showKeys[provider.id] ? (
+                          <EyeOff className="h-3.5 w-3.5" />
+                        ) : (
+                          <Eye className="h-3.5 w-3.5" />
+                        )}
+                      </button>
+                    </div>
+
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => handleSave(provider.id)}
+                        disabled={loading || !apiKeys[provider.id].trim()}
+                        className="h-8 px-3 text-xs"
+                      >
+                        Save
+                      </Button>
+                      {savedKeys.has(provider.id) && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleDelete(provider.id)}
+                          disabled={loading}
+                          className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive transition-colors"
+                          title="Remove API key"
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      )}
+                    </div>
                   </div>
-                )}
-              </div>
-              <div className="flex gap-2">
-                <div className="relative flex-1">
-                  <Input
-                    id={provider.id}
-                    type={showKeys[provider.id] ? 'text' : 'password'}
-                    placeholder={provider.placeholder}
-                    value={apiKeys[provider.id]}
-                    onChange={(e) => setApiKeys((prev) => ({ ...prev, [provider.id]: e.target.value }))}
-                    disabled={loading}
-                  />
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => toggleShowKey(provider.id)}
-                    className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0"
-                    type="button"
-                  >
-                    {showKeys[provider.id] ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                  </Button>
                 </div>
-                <Button onClick={() => handleSave(provider.id)} disabled={loading || !apiKeys[provider.id].trim()}>
-                  Save
-                </Button>
               </div>
             </div>
           ))}