diff --git a/components/project-creation-modal.tsx b/components/project-creation-modal.tsx index 659fd23..c56b8e4 100644 --- a/components/project-creation-modal.tsx +++ b/components/project-creation-modal.tsx @@ -12,8 +12,8 @@ import { import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; -import { - Github, +import { + Github, Loader2, CheckCircle2, Copy, @@ -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'; @@ -39,78 +38,51 @@ export function ProjectCreationModal({ workspace, }: ProjectCreationModalProps) { const router = useRouter(); - - // Steps: 1 = Name, 2 = GitHub, 3 = Instructions + const [step, setStep] = useState(1); const [productName, setProductName] = useState(''); const [selectedRepo, setSelectedRepo] = useState(null); const [createdProjectId, setCreatedProjectId] = useState(null); - + const [loading, setLoading] = useState(false); const [githubConnected, setGithubConnected] = useState(false); const [githubRepos, setGithubRepos] = useState([]); 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; - 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}` }, - }); - + const statusResponse = await fetch('/api/github/connect'); 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', { - headers: { 'Authorization': `Bearer ${token}` }, - }); - + const reposResponse = await fetch('/api/github/repos'); if (reposResponse.ok) { - const repos = await reposResponse.json(); // API returns array directly, not { repos: [] } - console.log('[ProjectModal] GitHub repos loaded:', repos.length, 'repos'); + const repos = await reposResponse.json(); 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,37 +91,19 @@ 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: { - name: productName, - }, - ...(selectedRepo && { + product: { name: productName }, + ...(selectedRepo && { githubRepo: selectedRepo.full_name, githubRepoId: selectedRepo.id, githubRepoUrl: selectedRepo.html_url, @@ -159,10 +113,7 @@ export function ProjectCreationModal({ const response = await fetch('/api/projects/create', { method: 'POST', - headers: { - 'Authorization': `Bearer ${token}`, - 'Content-Type': 'application/json', - }, + headers: { '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({
- {/* Step 1: Name */} {step === 1 && (
@@ -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(); - } + setStep(2); } }} autoFocus />
- -
- -
- +

- {githubConnected - ? 'Connect your GitHub repository (optional)' - : 'Connect GitHub or skip to continue'} + Connect GitHub or skip to continue

)} - {/* Step 2: GitHub Selection */} {step === 2 && (
- @@ -273,29 +203,21 @@ export function ProjectCreationModal({
) : ( <> -
+
- - - {(() => { - 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) => ( )) - ) : githubConnected ? ( - // Connected but no repos -

- No repositories found -

- ) : ( - // Not connected - show connect button + ) : !githubConnected ? (
-

- GitHub not connected yet -

+

GitHub not connected yet

+ ) : ( +

No repositories found

)}
- -
)} - {/* Step 3: Instructions */} {step === 3 && createdProjectId && (
@@ -385,9 +277,7 @@ export function ProjectCreationModal({
-

- Project created successfully! -

+

Project created successfully!

Project ID: {createdProjectId}

@@ -396,62 +286,43 @@ export function ProjectCreationModal({ -
-
- -
- - - -

- Create a .vibn file - in your project root with the following content: -

- -
- 
+              
+                
+                  

+                    Create a .vibn file in your project root:
+                  

+                  

+                    
 {`{
   "projectId": "${createdProjectId}",
   "version": "1.0.0"
 }`}
-                      

-
+ +
+ {selectedRepo && ( + - -
-

This enables:

-
    -
  • • Automatic session tracking from your cursor
    • -
  • • Cost monitoring per project
    • -
  • • AI chat history linking
    • -
  • • GitHub commit tracking
    • -
-
- - {selectedRepo && ( - - )} - - -
+ )} + +
-