fix bug click create button sign in will not able to trigger form

frontend/src/app/(main)/page.tsx

@@ -9,40 +9,41 @@ import { ProjectsSection } from '@/components/root/projects-section';
 import { PromptForm, PromptFormRef } from '@/components/root/prompt-form';
 import { ProjectContext } from '@/components/chat/code-engine/project-context';
 
+// ✅ Import your SignInModal and SignUpModal
+import { SignInModal } from '@/components/sign-in-modal';
+import { SignUpModal } from '@/components/sign-up-modal';
+
 export default function HomePage() {
+  // States for AuthChoiceModal
   const [showAuthChoice, setShowAuthChoice] = useState(false);
 
+  // ✅ Add states for sign in / sign up modals
+  const [showSignIn, setShowSignIn] = useState(false);
+  const [showSignUp, setShowSignUp] = useState(false);
+
   const promptFormRef = useRef<PromptFormRef>(null);
   const { isAuthorized } = useAuthContext();
   const { createProjectFromPrompt, isLoading } = useContext(ProjectContext);
 
   const handleSubmit = async () => {
     if (!promptFormRef.current) return;
 
-    // Get form data from the prompt form
     const { message, isPublic, model } = promptFormRef.current.getPromptData();
-
     if (!message.trim()) return;
 
     try {
-      // Create the project
       const result = await createProjectFromPrompt(message, isPublic, model);
-
-      // If successful, clear the input
       if (result) {
         promptFormRef.current.clearMessage();
-
-        // Note: No need to navigate here as the ProjectContext's onCompleted handler
-        // in the createProject mutation will handle navigation to the chat page
+        // No need to navigate here, ProjectContext handles navigation
       }
     } catch (error) {
       console.error('Error creating project:', error);
-      // Error handling is done via toast in ProjectContext
     }
   };
 
   return (
-    <div className="pt-32 pb-24 px-6 ">
+    <div className="pt-32 pb-24 px-6">
       <motion.div
         className="flex flex-col items-center"
         initial={{ opacity: 0, y: 20 }}
@@ -75,6 +76,7 @@ export default function HomePage() {
             ref={promptFormRef}
             isAuthorized={isAuthorized}
             onSubmit={handleSubmit}
+            // 💡 If the user isn't authorized, show the AuthChoiceModal
             onAuthRequired={() => setShowAuthChoice(true)}
             isLoading={isLoading}
           />
@@ -85,19 +87,36 @@ export default function HomePage() {
         </div>
       </motion.div>
 
-      {/* Modals */}
+      {/* Choice Modal */}
       <AuthChoiceModal
         isOpen={showAuthChoice}
         onClose={() => setShowAuthChoice(false)}
         onSignUpClick={() => {
+          // 1) Close the AuthChoice
           setShowAuthChoice(false);
+          // 2) Then open SignUpModal
+          setTimeout(() => {
+            setShowSignUp(true);
+          }, 100);
         }}
         onSignInClick={() => {
           setShowAuthChoice(false);
+          setTimeout(() => {
+            setShowSignIn(true);
+          }, 100);
         }}
       />
 
-      {/* Add this to your global CSS for the subtle pulse animation */}
+      {/* SignInModal & SignUpModal */}
+      <SignInModal
+        isOpen={showSignIn}
+        onClose={() => setShowSignIn(false)}
+      />
+      <SignUpModal
+        isOpen={showSignUp}
+        onClose={() => setShowSignUp(false)}
+      />
+
       <style jsx global>{`
         .animate-pulse-subtle {
           animation: pulse-subtle 2s infinite;

frontend/src/components/auth-choice-modal.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
 import { BackgroundGradient } from '@/components/ui/background-gradient';
 import { Button } from '@/components/ui/button';
@@ -24,6 +25,7 @@ export function AuthChoiceModal({
         <VisuallyHidden>
           <DialogTitle>Choose Authentication Method</DialogTitle>
         </VisuallyHidden>
+
         <BackgroundGradient className="rounded-[22px] p-4 bg-white dark:bg-zinc-900">
           <div className="w-full p-6 space-y-6">
             <h2 className="text-2xl font-semibold text-center dark:text-white">
@@ -33,16 +35,31 @@ export function AuthChoiceModal({
               Choose how you want to continue
             </p>
             <div className="space-y-4">
+              {/* Sign In button */}
               <Button
                 className="w-full py-6 text-lg bg-primary hover:bg-primary/90"
-                onClick={onSignInClick}
+                onClick={() => {
+                  // 1) Close current modal
+                  onClose();
+                  // 2) After a brief delay, call onSignInClick
+                  setTimeout(() => {
+                    onSignInClick();
+                  }, 100);
+                }}
               >
                 Sign in
               </Button>
+
+              {/* Sign Up button */}
               <Button
                 variant="outline"
                 className="w-full py-6 text-lg"
-                onClick={onSignUpClick}
+                onClick={() => {
+                  onClose();
+                  setTimeout(() => {
+                    onSignUpClick();
+                  }, 100);
+                }}
               >
                 Create an account
               </Button>