feat: add confirmation state to DashboardSettings save button

src/components/DashboardSettings.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { X, Settings, Key, Sparkles, Image as ImageIcon, Lightbulb, Box } from 'lucide-react';
+import { X, Settings, Key, Sparkles, Image as ImageIcon, Lightbulb, Box, Check, Loader2 } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { api } from '../lib/api';
 
@@ -17,6 +17,8 @@ export const DashboardSettings: React.FC<DashboardSettingsProps> = ({ isOpen, on
   const [openAiKey, setOpenAiKey] = useState('');
   const [geminiApiKey, setGeminiApiKey] = useState('');
   const [nanoBananaApiKey, setNanoBananaApiKey] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [isSaved, setIsSaved] = useState(false);
 
   useEffect(() => {
     if (isOpen) {
@@ -31,10 +33,16 @@ export const DashboardSettings: React.FC<DashboardSettingsProps> = ({ isOpen, on
       }).catch(err => {
         console.error("Failed to load user keys", err);
       });
+      // reset states
+      setIsSaving(false);
+      setIsSaved(false);
     }
   }, [isOpen]);
 
   const saveKeys = async () => {
+    setIsSaving(true);
+    setIsSaved(false);
+    
     const keys = {
       FAL_API_KEY: falApiKey,
       TRIPO_API_KEY: tripoApiKey,
@@ -46,8 +54,13 @@ export const DashboardSettings: React.FC<DashboardSettingsProps> = ({ isOpen, on
     };
     try {
       await api.saveUserKeys(keys);
+      setIsSaving(false);
+      setIsSaved(true);
+      setTimeout(() => {
         onClose();
+      }, 1500); // Close after showing success for a moment
     } catch (err) {
+      setIsSaving(false);
       console.error("Failed to save keys", err);
       alert("Failed to save API keys to database");
     }
@@ -218,10 +231,29 @@ export const DashboardSettings: React.FC<DashboardSettingsProps> = ({ isOpen, on
           <div className="p-6 bg-zinc-950 border-t border-zinc-800 shrink-0">
             <button 
               onClick={saveKeys}
-              className="w-full py-3 bg-white hover:bg-zinc-200 text-black font-bold rounded-xl transition-colors flex items-center justify-center gap-2"
+              disabled={isSaving || isSaved}
+              className={`w-full py-3 font-bold rounded-xl transition-colors flex items-center justify-center gap-2 ${
+                isSaved ? 'bg-green-500 text-white' : 
+                isSaving ? 'bg-zinc-700 text-zinc-400 cursor-not-allowed' : 
+                'bg-white hover:bg-zinc-200 text-black'
+              }`}
             >
+              {isSaved ? (
+                <>
+                  <Check size={18} />
+                  Keys Saved!
+                </>
+              ) : isSaving ? (
+                <>
+                  <Loader2 size={18} className="animate-spin" />
+                  Saving...
+                </>
+              ) : (
+                <>
                   <Key size={16} />
                   Save Keys
+                </>
+              )}
             </button>
           </div>
         </motion.div>