feat: rewrite project creation modal to remove Firebase auth

components/project-creation-modal.tsx

@@ -21,7 +21,6 @@ import {
   ChevronLeft
 } from 'lucide-react';
 import { toast } from 'sonner';
-import { auth } from '@/lib/firebase/config';
 import { Card, CardContent } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 
@@ -40,7 +39,6 @@ export function ProjectCreationModal({
 }: ProjectCreationModalProps) {
   const router = useRouter();
 
-  // Steps: 1 = Name, 2 = GitHub, 3 = Instructions
   const [step, setStep] = useState(1);
   const [productName, setProductName] = useState('');
   const [selectedRepo, setSelectedRepo] = useState<any>(null);
@@ -51,66 +49,40 @@ export function ProjectCreationModal({
   const [githubRepos, setGithubRepos] = useState<any[]>([]);
   const [loadingGithub, setLoadingGithub] = useState(false);
 
-  // Check GitHub connection on mount and when moving to step 2
   useEffect(() => {
     async function checkGitHub() {
       if (!open || step !== 2) return;
-      
       setLoadingGithub(true);
       try {
-        const user = auth.currentUser;
+        const statusResponse = await fetch('/api/github/connect');
-        if (!user) {
-          console.log('[ProjectModal] No user found');
-          setLoadingGithub(false);
-          return;
-        }
-
-        const token = await user.getIdToken();
-        
-        const statusResponse = await fetch('/api/github/connect', {
-          headers: { 'Authorization': `Bearer ${token}` },
-        });
-
         if (statusResponse.ok) {
           const statusData = await statusResponse.json();
-          console.log('[ProjectModal] GitHub status:', statusData);
           const isConnected = statusData.connected || false;
           setGithubConnected(isConnected);
-
           if (isConnected) {
-            const reposResponse = await fetch('/api/github/repos', {
+            const reposResponse = await fetch('/api/github/repos');
-              headers: { 'Authorization': `Bearer ${token}` },
-            });
-
             if (reposResponse.ok) {
-              const repos = await reposResponse.json(); // API returns array directly, not { repos: [] }
+              const repos = await reposResponse.json();
-              console.log('[ProjectModal] GitHub repos loaded:', repos.length, 'repos');
               setGithubRepos(Array.isArray(repos) ? repos : []);
-            } else {
+            }
-              console.error('[ProjectModal] Failed to fetch repos:', reposResponse.status);
-              setGithubRepos([]);
           }
         } else {
-            console.log('[ProjectModal] GitHub not connected');
-            setGithubRepos([]);
-          }
-        } else {
-          console.error('[ProjectModal] Failed to check GitHub status:', statusResponse.status);
           setGithubConnected(false);
-          setGithubRepos([]);
         }
       } catch (error) {
-        console.error('[ProjectModal] Error checking GitHub:', error);
+        console.error('GitHub check error:', error);
         setGithubConnected(false);
-        setGithubRepos([]);
       } finally {
         setLoadingGithub(false);
       }
     }
-
     checkGitHub();
   }, [open, step]);
 
+  useEffect(() => {
+    if (!open) setTimeout(resetModal, 200);
+  }, [open]);
+
   const resetModal = () => {
     setStep(1);
     setProductName('');
@@ -119,36 +91,18 @@ export function ProjectCreationModal({
     setLoading(false);
   };
 
-  useEffect(() => {
-    if (!open) {
-      // Reset after closing animation
-      setTimeout(resetModal, 200);
-    }
-  }, [open]);
-
   const handleCreateProject = async () => {
     if (!productName.trim()) {
       toast.error('Product name is required');
       return;
     }
-
     setLoading(true);
     try {
-      const user = auth.currentUser;
-      if (!user) {
-        toast.error('You must be signed in');
-        return;
-      }
-
-      const token = await user.getIdToken();
-      
       const projectData = {
         projectName: productName.trim(),
         projectType: selectedRepo ? 'existing' : 'scratch',
         slug: productName.toLowerCase().replace(/[^a-z0-9]+/g, '-'),
-        product: {
+        product: { name: productName },
-          name: productName,
-        },
         ...(selectedRepo && {
           githubRepo: selectedRepo.full_name,
           githubRepoId: selectedRepo.id,
@@ -159,10 +113,7 @@ export function ProjectCreationModal({
 
       const response = await fetch('/api/projects/create', {
         method: 'POST',
-        headers: {
+        headers: { 'Content-Type': 'application/json' },
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
-        },
         body: JSON.stringify(projectData),
       });
 
@@ -170,7 +121,7 @@ export function ProjectCreationModal({
         const data = await response.json();
         setCreatedProjectId(data.projectId);
         toast.success('Project created!');
-        setStep(3); // Move to instructions
+        setStep(3);
       } else {
         const error = await response.json();
         toast.error(error.error || 'Failed to create project');
@@ -212,7 +163,6 @@ export function ProjectCreationModal({
         </DialogHeader>
 
         <div className="space-y-6 py-4">
-          {/* Step 1: Name */}
           {step === 1 && (
             <div className="space-y-4">
               <div className="space-y-2">
@@ -224,44 +174,24 @@ export function ProjectCreationModal({
                   onChange={(e) => setProductName(e.target.value)}
                   onKeyDown={(e) => {
                     if (e.key === 'Enter' && productName.trim()) {
-                      if (githubConnected) {
                       setStep(2);
-                      } else {
-                        handleCreateProject();
-                      }
                     }
                   }}
                   autoFocus
                 />
               </div>
-
+              <Button onClick={() => setStep(2)} disabled={!productName.trim()} className="w-full">
-              <div className="flex gap-3">
-                <Button
-                  onClick={() => setStep(2)}
-                  disabled={!productName.trim()}
-                  className="flex-1"
-                >
                 Next: {githubConnected ? 'Select Repository' : 'Connect GitHub'}
               </Button>
-              </div>
-
               <p className="text-xs text-muted-foreground text-center">
-                {githubConnected 
+                Connect GitHub or skip to continue
-                  ? 'Connect your GitHub repository (optional)' 
-                  : 'Connect GitHub or skip to continue'}
               </p>
             </div>
           )}
 
-          {/* Step 2: GitHub Selection */}
           {step === 2 && (
             <div className="space-y-4">
-              <Button
+              <Button variant="ghost" size="sm" onClick={() => setStep(1)} className="mb-2">
-                variant="ghost"
-                size="sm"
-                onClick={() => setStep(1)}
-                className="mb-2"
-              >
                 <ChevronLeft className="mr-1 h-4 w-4" />
                 Back
               </Button>
@@ -273,29 +203,21 @@ export function ProjectCreationModal({
                 </div>
               ) : (
                 <>
-                  <div className="space-y-2 max-h-[300px] overflow-y-auto" key={`repos-${githubRepos.length}`}>
+                  <div className="space-y-2 max-h-[300px] overflow-y-auto">
                     <Button
-                      variant={selectedRepo === null ? "default" : "outline"}
+                      variant={selectedRepo === null ? 'default' : 'outline'}
                       className="w-full justify-start"
                       onClick={() => setSelectedRepo(null)}
                     >
                       <CheckCircle2 className={`mr-2 h-4 w-4 ${selectedRepo === null ? '' : 'opacity-0'}`} />
                       Skip - No GitHub repository
                     </Button>
-
                     <Separator className="my-2" />
-
-                    {(() => {
-                      console.log('[ProjectModal Render] githubConnected:', githubConnected, 'repos:', githubRepos.length, 'reposData:', githubRepos);
-                      return null;
-                    })()}
-
                     {githubRepos.length > 0 ? (
-                      // Show repos if we have any
                       githubRepos.map((repo) => (
                         <Button
                           key={repo.id}
-                          variant={selectedRepo?.id === repo.id ? "default" : "outline"}
+                          variant={selectedRepo?.id === repo.id ? 'default' : 'outline'}
                           className="w-full justify-start"
                           onClick={() => setSelectedRepo(repo)}
                         >
@@ -304,40 +226,19 @@ export function ProjectCreationModal({
                           <span className="truncate">{repo.full_name}</span>
                         </Button>
                       ))
-                    ) : githubConnected ? (
+                    ) : !githubConnected ? (
-                      // Connected but no repos
-                      <p className="text-sm text-muted-foreground text-center py-4">
-                        No repositories found
-                      </p>
-                    ) : (
-                      // Not connected - show connect button
                       <div className="space-y-3 py-4">
-                        <p className="text-sm text-muted-foreground text-center">
+                        <p className="text-sm text-muted-foreground text-center">GitHub not connected yet</p>
-                          GitHub not connected yet
-                        </p>
                         <Button
                           variant="outline"
                           className="w-full"
                           onClick={async () => {
                             try {
-                              const user = auth.currentUser;
-                              if (!user) {
-                                toast.error('Please sign in first');
-                                return;
-                              }
-
-                              const token = await user.getIdToken();
                               const response = await fetch('/api/github/oauth-url', {
                                 method: 'POST',
-                                headers: { 
+                                headers: { 'Content-Type': 'application/json' },
-                                  'Authorization': `Bearer ${token}`,
+                                body: JSON.stringify({ returnTo: `/${workspace}/projects` }),
-                                  'Content-Type': 'application/json',
-                                },
-                                body: JSON.stringify({ 
-                                  returnTo: `/${workspace}/projects` 
-                                }),
                               });
-
                               if (response.ok) {
                                 const { authUrl } = await response.json();
                                 window.location.href = authUrl;
@@ -345,7 +246,6 @@ export function ProjectCreationModal({
                                 toast.error('Failed to initiate GitHub OAuth');
                               }
                             } catch (error) {
-                              console.error('GitHub OAuth error:', error);
                               toast.error('Error connecting to GitHub');
                             }
                           }}
@@ -354,20 +254,13 @@ export function ProjectCreationModal({
                           Connect GitHub
                         </Button>
                       </div>
+                    ) : (
+                      <p className="text-sm text-muted-foreground text-center py-4">No repositories found</p>
                     )}
                   </div>
-
+                  <Button onClick={handleCreateProject} disabled={loading} className="w-full" size="lg">
-                  <Button
-                    onClick={handleCreateProject}
-                    disabled={loading}
-                    className="w-full"
-                    size="lg"
-                  >
                     {loading ? (
-                      <>
+                      <><Loader2 className="mr-2 h-4 w-4 animate-spin" />Creating...</>
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                        Creating...
-                      </>
                     ) : (
                       'Create Project'
                     )}
@@ -377,7 +270,6 @@ export function ProjectCreationModal({
             </div>
           )}
 
-          {/* Step 3: Instructions */}
           {step === 3 && createdProjectId && (
             <div className="space-y-4">
               <Card className="border-green-500/50 bg-green-500/5">
@@ -385,9 +277,7 @@ export function ProjectCreationModal({
                   <div className="flex items-start gap-3">
                     <CheckCircle2 className="h-5 w-5 text-green-600 mt-0.5" />
                     <div>
-                      <p className="font-medium text-green-900 dark:text-green-100">
+                      <p className="font-medium text-green-900 dark:text-green-100">Project created successfully!</p>
-                        Project created successfully!
-                      </p>
                       <p className="text-sm text-green-700 dark:text-green-300 mt-1">
                         Project ID: <code className="font-mono">{createdProjectId}</code>
                       </p>
@@ -396,18 +286,11 @@ export function ProjectCreationModal({
                 </CardContent>
               </Card>
 
-              <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <Label className="text-base font-semibold">Next Step: Add .vibn file</Label>
-                </div>
-
               <Card>
                 <CardContent className="pt-6 space-y-4">
                   <p className="text-sm text-muted-foreground">
-                      Create a <code className="font-mono bg-muted px-1.5 py-0.5 rounded">.vibn</code> file 
+                    Create a <code className="font-mono bg-muted px-1.5 py-0.5 rounded">.vibn</code> file in your project root:
-                      in your project root with the following content:
                   </p>
-
                   <div className="relative">
                     <pre className="bg-muted p-4 rounded-lg text-sm font-mono overflow-x-auto">
 {`{
@@ -424,17 +307,6 @@ export function ProjectCreationModal({
                       <Copy className="h-4 w-4" />
                     </Button>
                   </div>
-
-                    <div className="space-y-2">
-                      <p className="text-sm font-medium">This enables:</p>
-                      <ul className="text-sm text-muted-foreground space-y-1 ml-4">
-                        <li>• Automatic session tracking from your cursor</li>
-                        <li>• Cost monitoring per project</li>
-                        <li>• AI chat history linking</li>
-                        <li>• GitHub commit tracking</li>
-                      </ul>
-                    </div>
-
                   {selectedRepo && (
                     <div className="flex items-center gap-2 pt-2">
                       <Github className="h-4 w-4 text-muted-foreground" />
@@ -451,7 +323,6 @@ export function ProjectCreationModal({
                   )}
                 </CardContent>
               </Card>
-              </div>
 
               <div className="flex gap-3">
                 <Button
@@ -462,11 +333,7 @@ export function ProjectCreationModal({
                   <Copy className="mr-2 h-4 w-4" />
                   Copy .vibn Content
                 </Button>
-                <Button
+                <Button onClick={handleFinish} className="flex-1" size="lg">
-                  onClick={handleFinish}
-                  className="flex-1"
-                  size="lg"
-                >
                   Start AI Chat
                 </Button>
               </div>