Revert instance creation changes

Reverts changes to the instance creation form and related hooks, restoring the functionality to create and connect instances as it was before the recent changes.

src/components/whatsapp/InstanceList.tsx

@@ -56,6 +56,15 @@ const InstanceList = ({
     <div className="space-y-4">
       <div className="flex justify-between items-center">
         <h2 className="text-xl font-semibold">Instâncias Criadas</h2>
+        <Button 
+          variant="outline" 
+          size="sm"
+          onClick={onRefreshInstances}
+          disabled={isRefreshing}
+        >
+          <RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? 'animate-spin' : ''}`} />
+          {isRefreshing ? 'Atualizando...' : 'Atualizar Lista'}
+        </Button>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {instances.map((instance) => (

src/pages/WhatsApp.tsx

@@ -12,6 +12,7 @@ import { useWhatsAppInstance, WHATSAPP_INSTANCE_KEY } from '@/hooks/whatsApp/use
 import { usePeriodicStatusCheck } from '@/hooks/whatsApp/usePeriodicStatusCheck';
 import { Button } from '@/components/ui/button';
 import { RefreshCw } from 'lucide-react';
+import { useState } from 'react';
 
 const WhatsApp = () => {
   const { 
@@ -47,6 +48,9 @@ const WhatsApp = () => {
     clearInstanceName
   } = useWhatsAppInstance(currentUserId, addInstance);
   
+  // Toggle for showing the creation form
+  const [showCreateForm, setShowCreateForm] = useState(!instanceFound && instances.length === 0);
+  
   // Set up periodic status checking only after instances are loaded
   usePeriodicStatusCheck(instances.length, checkAllInstancesStatus);
 
@@ -55,6 +59,7 @@ const WhatsApp = () => {
     console.log('New instance to be added:', newInstance);
     addInstance(newInstance);
     setInstanceFound(true);
+    setShowCreateForm(false);
     
     // Salvar o nome da instância no localStorage para uso futuro
     saveInstanceName(newInstance.instanceName);
@@ -84,6 +89,7 @@ const WhatsApp = () => {
       // Se a instância excluída for a atual, limpar o nome salvo
       if (instanceToDelete.instanceName === instanceName) {
         clearInstanceName();
+        setShowCreateForm(true);
       }
     } else {
       console.error(`Instance with ID ${instanceId} not found for deletion`);
@@ -113,16 +119,27 @@ const WhatsApp = () => {
         
         {isLoading ? (
           <LoadingState />
-        ) : !instanceFound && !hasInstances ? (
+        ) : (
-          // Show create form if no instance found and no instances loaded
+          <>
+            {/* Always show create form if showCreateForm is true */}
+            {showCreateForm && (
               <CreateInstanceForm 
                 onInstanceCreated={handleInstanceCreated} 
                 initialInstanceName={instanceName}
               />
-        ) : (
+            )}
-          // Only show stats and instance list if instances are available
+            
-          <>
+            {/* Toggle Create Form Button - only show if form is hidden */}
-            {/* Stats component */}
+            {!showCreateForm && (
+              <Button 
+                onClick={() => setShowCreateForm(true)}
+                className="mb-4"
+              >
+                Conectar Novo WhatsApp
+              </Button>
+            )}
+            
+            {/* Only show stats if instances are available */}
             {hasInstances && <InstanceStats instances={instances} />}
             
             {/* List of created instances */}