Simplify project creation: name → create → redirect

- Remove GitHub step entirely; single input + Next button
- Creates project immediately, redirects to /overview on success
- Rewritten in Stackless inline style (no shadcn Dialog/Button/Input)

Made-with: Cursor

components/project-creation-modal.tsx

@@ -1,362 +1,185 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useRouter } from 'next/navigation';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Github,
-  Loader2,
-  CheckCircle2,
-  XCircle,
-  ExternalLink,
-  ChevronLeft,
-} from 'lucide-react';
 import { toast } from 'sonner';
-import { Card, CardContent } from '@/components/ui/card';
-import { Separator } from '@/components/ui/separator';
 
 interface ProjectCreationModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  initialWorkspacePath?: string;
   workspace: string;
+  initialWorkspacePath?: string;
 }
 
-export function ProjectCreationModal({
+export function ProjectCreationModal({ open, onOpenChange, workspace }: ProjectCreationModalProps) {
-  open,
-  onOpenChange,
-  initialWorkspacePath,
-  workspace,
-}: ProjectCreationModalProps) {
   const router = useRouter();
-
-  const [step, setStep] = useState(1);
   const [productName, setProductName] = useState('');
-  const [selectedRepo, setSelectedRepo] = useState<any>(null);
-  const [createdProjectId, setCreatedProjectId] = useState<string | null>(null);
-  const [createdGiteaRepo, setCreatedGiteaRepo] = useState<{ repo: string; repoUrl: string } | null>(null);
-  const [createdTheiaUrl, setCreatedTheiaUrl] = useState<string | null>(null);
-
   const [loading, setLoading] = useState(false);
-  const [githubConnected, setGithubConnected] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
-  const [githubRepos, setGithubRepos] = useState<any[]>([]);
-  const [loadingGithub, setLoadingGithub] = useState(false);
 
   useEffect(() => {
-    async function checkGitHub() {
+    if (open) {
-      if (!open || step !== 2) return;
+      setProductName('');
-      setLoadingGithub(true);
+      setLoading(false);
-      try {
+      setTimeout(() => inputRef.current?.focus(), 80);
-        const statusResponse = await fetch('/api/github/connect');
-        if (statusResponse.ok) {
-          const statusData = await statusResponse.json();
-          const isConnected = statusData.connected || false;
-          setGithubConnected(isConnected);
-          if (isConnected) {
-            const reposResponse = await fetch('/api/github/repos');
-            if (reposResponse.ok) {
-              const repos = await reposResponse.json();
-              setGithubRepos(Array.isArray(repos) ? repos : []);
-            }
-          }
-        } else {
-          setGithubConnected(false);
-        }
-      } catch (error) {
-        console.error('GitHub check error:', error);
-        setGithubConnected(false);
-      } finally {
-        setLoadingGithub(false);
-      }
     }
-    checkGitHub();
-  }, [open, step]);
-
-  useEffect(() => {
-    if (!open) setTimeout(resetModal, 200);
   }, [open]);
 
-  const resetModal = () => {
+  // Close on Escape
-    setStep(1);
+  useEffect(() => {
-    setProductName('');
+    if (!open) return;
-    setSelectedRepo(null);
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onOpenChange(false); };
-    setCreatedProjectId(null);
+    window.addEventListener('keydown', handler);
-    setCreatedGiteaRepo(null);
+    return () => window.removeEventListener('keydown', handler);
-    setCreatedTheiaUrl(null);
+  }, [open, onOpenChange]);
-    setLoading(false);
-  };
 
-  const handleCreateProject = async () => {
+  const handleCreate = async () => {
-    if (!productName.trim()) {
+    const name = productName.trim();
-      toast.error('Product name is required');
+    if (!name) return;
-      return;
-    }
     setLoading(true);
     try {
-      const projectData = {
+      const res = await fetch('/api/projects/create', {
-        projectName: productName.trim(),
-        projectType: selectedRepo ? 'existing' : 'scratch',
-        slug: productName.toLowerCase().replace(/[^a-z0-9]+/g, '-'),
-        product: { name: productName },
-        ...(selectedRepo && {
-          githubRepo: selectedRepo.full_name,
-          githubRepoId: selectedRepo.id,
-          githubRepoUrl: selectedRepo.html_url,
-          githubDefaultBranch: selectedRepo.default_branch,
-        }),
-      };
-
-      const response = await fetch('/api/projects/create', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(projectData),
+        body: JSON.stringify({
+          projectName: name,
+          projectType: 'scratch',
+          slug: name.toLowerCase().replace(/[^a-z0-9]+/g, '-'),
+          product: { name },
+        }),
       });
-
+      if (!res.ok) {
-      if (response.ok) {
+        const err = await res.json();
-        const data = await response.json();
+        toast.error(err.error || 'Failed to create project');
-        setCreatedProjectId(data.projectId);
+        return;
-        if (data.gitea) setCreatedGiteaRepo(data.gitea);
-        if (data.theiaWorkspaceUrl) setCreatedTheiaUrl(data.theiaWorkspaceUrl);
-        toast.success('Project created!');
-        setStep(3);
-      } else {
-        const error = await response.json();
-        toast.error(error.error || 'Failed to create project');
       }
-    } catch (error) {
+      const data = await res.json();
-      console.error('Error creating project:', error);
+      onOpenChange(false);
-      toast.error('An error occurred');
+      router.push(`/${workspace}/project/${data.projectId}/overview`);
+    } catch {
+      toast.error('Something went wrong');
     } finally {
       setLoading(false);
     }
   };
 
-  const handleFinish = () => {
+  if (!open) return null;
-    onOpenChange(false);
-    if (createdProjectId) {
-      router.push(`/${workspace}/project/${createdProjectId}/overview`);
-    }
-  };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <>
-      <DialogContent className="sm:max-w-[600px]">
+      {/* Backdrop */}
-        <DialogHeader>
+      <div
-          <DialogTitle>
+        onClick={() => onOpenChange(false)}
-            {step === 1 && 'Create New Project'}
+        style={{
-            {step === 2 && 'Connect GitHub Repository'}
+          position: 'fixed', inset: 0, zIndex: 50,
-            {step === 3 && 'Setup Complete!'}
+          background: 'rgba(26,26,26,0.35)',
-          </DialogTitle>
+          animation: 'fadeIn 0.15s ease',
-          <DialogDescription>
+        }}
-            {step === 1 && 'Give your project a name to get started.'}
+      />
-            {step === 2 && 'Select a GitHub repository to connect (optional).'}
-            {step === 3 && 'Add the .vibn file to your project to enable tracking.'}
-          </DialogDescription>
-        </DialogHeader>
 
-        <div className="space-y-6 py-4">
+      {/* Modal */}
-          {step === 1 && (
+      <div style={{
-            <div className="space-y-4">
+        position: 'fixed', inset: 0, zIndex: 51,
-              <div className="space-y-2">
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
-                <Label htmlFor="productName">Product Name *</Label>
+        padding: 24, pointerEvents: 'none',
-                <Input
+      }}>
-                  id="productName"
+        <div
-                  placeholder="e.g., TaskMaster, HealthTracker, MyApp"
+          style={{
-                  value={productName}
+            background: '#fff', borderRadius: 14,
-                  onChange={(e) => setProductName(e.target.value)}
+            boxShadow: '0 8px 40px rgba(26,26,26,0.14)',
-                  onKeyDown={(e) => {
+            padding: '36px 40px',
-                    if (e.key === 'Enter' && productName.trim()) {
+            width: '100%', maxWidth: 480,
-                      setStep(2);
+            fontFamily: 'Outfit, sans-serif',
-                    }
+            pointerEvents: 'all',
-                  }}
+            animation: 'slideUp 0.18s cubic-bezier(0.4,0,0.2,1)',
-                  autoFocus
+          }}
-                />
+          onClick={e => e.stopPropagation()}
-              </div>
+        >
-              <Button onClick={() => setStep(2)} disabled={!productName.trim()} className="w-full">
+          <style>{`
-                Next: {githubConnected ? 'Select Repository' : 'Connect GitHub'}
+            @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-              </Button>
+            @keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
-              <p className="text-xs text-muted-foreground text-center">
+          `}</style>
-                Connect GitHub or skip to continue
+
+          {/* Header */}
+          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 28 }}>
+            <div>
+              <h2 style={{ fontFamily: 'Newsreader, serif', fontSize: '1.35rem', fontWeight: 400, color: '#1a1a1a', marginBottom: 4 }}>
+                New project
+              </h2>
+              <p style={{ fontSize: '0.8rem', color: '#a09a90' }}>
+                Give your project a name to get started.
               </p>
             </div>
-          )}
+            <button
+              onClick={() => onOpenChange(false)}
+              style={{
+                background: 'none', border: 'none', cursor: 'pointer',
+                color: '#b5b0a6', fontSize: '1.1rem', lineHeight: 1,
+                padding: '2px 4px', borderRadius: 4,
+                transition: 'color 0.12s',
+              }}
+              onMouseEnter={e => (e.currentTarget.style.color = '#6b6560')}
+              onMouseLeave={e => (e.currentTarget.style.color = '#b5b0a6')}
+            >
+              ×
+            </button>
+          </div>
 
-          {step === 2 && (
+          {/* Name input */}
-            <div className="space-y-4">
+          <div style={{ marginBottom: 20 }}>
-              <Button variant="ghost" size="sm" onClick={() => setStep(1)} className="mb-2">
+            <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 600, color: '#6b6560', marginBottom: 7, letterSpacing: '0.02em' }}>
-                <ChevronLeft className="mr-1 h-4 w-4" />
+              Project name
-                Back
+            </label>
-              </Button>
+            <input
+              ref={inputRef}
+              type="text"
+              value={productName}
+              onChange={e => setProductName(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter' && productName.trim() && !loading) handleCreate(); }}
+              placeholder="e.g. Foxglove, Meridian, OpsAI…"
+              style={{
+                width: '100%', padding: '11px 14px',
+                borderRadius: 8, border: '1px solid #e0dcd4',
+                background: '#faf8f5', fontSize: '0.9rem',
+                fontFamily: 'Outfit, sans-serif', color: '#1a1a1a',
+                outline: 'none', transition: 'border-color 0.12s',
+                boxSizing: 'border-box',
+              }}
+              onFocus={e => (e.currentTarget.style.borderColor = '#1a1a1a')}
+              onBlur={e => (e.currentTarget.style.borderColor = '#e0dcd4')}
+            />
+          </div>
 
-              {loadingGithub ? (
+          {/* Create button */}
-                <div className="flex flex-col items-center justify-center py-8 space-y-4">
+          <button
-                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            onClick={handleCreate}
-                  <p className="text-sm text-muted-foreground">Checking GitHub connection...</p>
+            disabled={!productName.trim() || loading}
-                </div>
+            style={{
-              ) : (
+              width: '100%', padding: '12px',
-                <>
+              borderRadius: 8, border: 'none',
-                  <div className="space-y-2 max-h-[300px] overflow-y-auto">
+              background: productName.trim() && !loading ? '#1a1a1a' : '#e0dcd4',
-                    <Button
+              color: productName.trim() && !loading ? '#fff' : '#b5b0a6',
-                      variant={selectedRepo === null ? 'default' : 'outline'}
+              fontSize: '0.88rem', fontWeight: 600,
-                      className="w-full justify-start"
+              fontFamily: 'Outfit, sans-serif',
-                      onClick={() => setSelectedRepo(null)}
+              cursor: productName.trim() && !loading ? 'pointer' : 'not-allowed',
-                    >
+              transition: 'opacity 0.15s, background 0.15s',
-                      <CheckCircle2 className={`mr-2 h-4 w-4 ${selectedRepo === null ? '' : 'opacity-0'}`} />
+              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
-                      Skip - No GitHub repository
+            }}
-                    </Button>
+            onMouseEnter={e => { if (productName.trim() && !loading) (e.currentTarget.style.opacity = '0.85'); }}
-                    <Separator className="my-2" />
+            onMouseLeave={e => { (e.currentTarget.style.opacity = '1'); }}
-                    {githubRepos.length > 0 ? (
+          >
-                      githubRepos.map((repo) => (
+            {loading ? (
-                        <Button
+              <>
-                          key={repo.id}
+                <span style={{ width: 14, height: 14, borderRadius: '50%', border: '2px solid #fff4', borderTopColor: '#fff', animation: 'spin 0.7s linear infinite', display: 'inline-block' }} />
-                          variant={selectedRepo?.id === repo.id ? 'default' : 'outline'}
+                <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
-                          className="w-full justify-start"
+                Creating…
-                          onClick={() => setSelectedRepo(repo)}
+              </>
-                        >
+            ) : (
-                          <CheckCircle2 className={`mr-2 h-4 w-4 ${selectedRepo?.id === repo.id ? '' : 'opacity-0'}`} />
+              'Next →'
-                          <Github className="mr-2 h-4 w-4" />
+            )}
-                          <span className="truncate">{repo.full_name}</span>
+          </button>
-                        </Button>
-                      ))
-                    ) : !githubConnected ? (
-                      <div className="space-y-3 py-4">
-                        <p className="text-sm text-muted-foreground text-center">GitHub not connected yet</p>
-                        <Button
-                          variant="outline"
-                          className="w-full"
-                          onClick={async () => {
-                            try {
-                              const response = await fetch('/api/github/oauth-url', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ returnTo: `/${workspace}/projects` }),
-                              });
-                              if (response.ok) {
-                                const { authUrl } = await response.json();
-                                window.location.href = authUrl;
-                              } else {
-                                toast.error('Failed to initiate GitHub OAuth');
-                              }
-                            } catch (error) {
-                              toast.error('Error connecting to GitHub');
-                            }
-                          }}
-                        >
-                          <Github className="mr-2 h-4 w-4" />
-                          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">
-                    {loading ? (
-                      <><Loader2 className="mr-2 h-4 w-4 animate-spin" />Creating...</>
-                    ) : (
-                      'Create Project'
-                    )}
-                  </Button>
-                </>
-              )}
-            </div>
-          )}
-
-          {step === 3 && createdProjectId && (
-            <div className="space-y-4">
-              <Card className="border-green-500/50 bg-green-500/5">
-                <CardContent className="pt-6">
-                  <div className="flex items-start gap-3">
-                    <CheckCircle2 className="h-5 w-5 text-green-600 mt-0.5 shrink-0" />
-                    <div className="space-y-1">
-                      <p className="font-medium text-green-900 dark:text-green-100">
-                        {productName} is ready
-                      </p>
-                      {createdGiteaRepo ? (
-                        <a
-                          href={createdGiteaRepo.repoUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-sm text-green-700 dark:text-green-300 hover:underline flex items-center gap-1"
-                        >
-                          <Github className="h-3.5 w-3.5" />
-                          {createdGiteaRepo.repo}
-                          <ExternalLink className="h-3 w-3" />
-                        </a>
-                      ) : (
-                        <p className="text-sm text-green-700 dark:text-green-300">
-                          Gitea repo provisioning skipped
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-
-              <div className="rounded-md border bg-muted/30 p-4 space-y-2 text-sm">
-                <p className="font-medium">What was provisioned:</p>
-                <ul className="space-y-1 text-muted-foreground text-xs">
-                  <li className="flex items-center gap-2">
-                    <CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0" />
-                    Project record saved to database
-                  </li>
-                  <li className="flex items-center gap-2">
-                    {createdGiteaRepo ? (
-                      <CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0" />
-                    ) : (
-                      <XCircle className="h-3.5 w-3.5 text-yellow-500 shrink-0" />
-                    )}
-                    Gitea repo created at git.vibnai.com
-                  </li>
-                  <li className="flex items-center gap-2">
-                    {createdGiteaRepo ? (
-                      <CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0" />
-                    ) : (
-                      <XCircle className="h-3.5 w-3.5 text-yellow-500 shrink-0" />
-                    )}
-                    Webhook registered (push, PR, issues → Vibn)
-                  </li>
-                  <li className="flex items-center gap-2">
-                    {createdTheiaUrl ? (
-                      <CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0" />
-                    ) : (
-                      <Loader2 className="h-3.5 w-3.5 text-blue-400 shrink-0 animate-spin" />
-                    )}
-                    Dedicated IDE workspace{createdTheiaUrl
-                      ? ` at ${createdTheiaUrl.replace('https://', '')}`
-                      : ' — provisioning in background (ready in ~30s)'}
-                  </li>
-                </ul>
-              </div>
-
-              <div className="flex gap-3">
-                <a
-                  href={createdTheiaUrl ?? 'https://theia.vibnai.com'}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex-1"
-                >
-                  <Button variant="outline" className="w-full">
-                    Open IDE
-                  </Button>
-                </a>
-                <Button onClick={handleFinish} className="flex-1" size="lg">
-                  Go to Project
-                </Button>
-              </div>
-            </div>
-          )}
         </div>
-      </DialogContent>
+      </div>
-    </Dialog>
+    </>
   );
 }