feat: add AI Settings modal to manage API keys from the UI

src/components/TopBar.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Download, LogOut, Undo2, CloudUpload, Loader2, ChevronDown, RotateCcw, Maximize2, X } from 'lucide-react';
+import { Download, LogOut, Undo2, CloudUpload, Loader2, ChevronDown, RotateCcw, Maximize2, X, Settings } from 'lucide-react';
 import { cn } from '../lib/utils';
+import { SettingsModal } from './SettingsModal';
 
 interface TopBarProps {
   stats: any;
@@ -26,6 +27,7 @@ interface TopBarProps {
 
 export function TopBar({ stats, activeModule, onExport, onRefresh, hasData, hasUnsavedChanges, userEmail, onSignOut, canUndo, onUndo, undoMessage, undoSteps, pendingCount, pendingChanges, onSaveAll, onRevertRow, isSavingAll, isMaximized, onToggleMaximize }: TopBarProps) {
   const [showPending, setShowPending] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -190,6 +192,15 @@ export function TopBar({ stats, activeModule, onExport, onRefresh, hasData, hasU
           MAXIMIZE
         </button>
 
+        <button
+          onClick={() => setShowSettings(true)}
+          className="flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium bg-slate-700 hover:bg-slate-600 text-slate-200 transition-colors"
+          title="AI Settings - Configure API keys"
+        >
+          <Settings className="w-4 h-4" />
+          AI SETTINGS
+        </button>
+
         <button
           onClick={onUndo}
           disabled={!canUndo}
@@ -223,6 +234,11 @@ export function TopBar({ stats, activeModule, onExport, onRefresh, hasData, hasU
           </div>
         )}
       </div>
+
+      <SettingsModal 
+        isOpen={showSettings} 
+        onClose={() => setShowSettings(false)} 
+      />
     </header>
   );
 }