feat: update project creation modal success screen

Replace .vibn file instruction with Gitea repo link, provisioning
checklist, and Open IDE / Go to Project buttons. Store gitea repo
info from API response to display in the success state.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-02-19 10:59:30 -08:00
parent 6668cc84fa
commit a281d4d373

View File

@@ -16,9 +16,9 @@ import {
Github, Github,
Loader2, Loader2,
CheckCircle2, CheckCircle2,
Copy, XCircle,
ExternalLink, ExternalLink,
ChevronLeft ChevronLeft,
} from 'lucide-react'; } from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
@@ -43,6 +43,7 @@ export function ProjectCreationModal({
const [productName, setProductName] = useState(''); const [productName, setProductName] = useState('');
const [selectedRepo, setSelectedRepo] = useState<any>(null); const [selectedRepo, setSelectedRepo] = useState<any>(null);
const [createdProjectId, setCreatedProjectId] = useState<string | null>(null); const [createdProjectId, setCreatedProjectId] = useState<string | null>(null);
const [createdGiteaRepo, setCreatedGiteaRepo] = useState<{ repo: string; repoUrl: string } | null>(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [githubConnected, setGithubConnected] = useState(false); const [githubConnected, setGithubConnected] = useState(false);
@@ -88,6 +89,7 @@ export function ProjectCreationModal({
setProductName(''); setProductName('');
setSelectedRepo(null); setSelectedRepo(null);
setCreatedProjectId(null); setCreatedProjectId(null);
setCreatedGiteaRepo(null);
setLoading(false); setLoading(false);
}; };
@@ -120,6 +122,7 @@ export function ProjectCreationModal({
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
setCreatedProjectId(data.projectId); setCreatedProjectId(data.projectId);
if (data.gitea) setCreatedGiteaRepo(data.gitea);
toast.success('Project created!'); toast.success('Project created!');
setStep(3); setStep(3);
} else { } else {
@@ -134,11 +137,6 @@ export function ProjectCreationModal({
} }
}; };
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
toast.success('Copied to clipboard!');
};
const handleFinish = () => { const handleFinish = () => {
onOpenChange(false); onOpenChange(false);
if (createdProjectId) { if (createdProjectId) {
@@ -275,66 +273,71 @@ export function ProjectCreationModal({
<Card className="border-green-500/50 bg-green-500/5"> <Card className="border-green-500/50 bg-green-500/5">
<CardContent className="pt-6"> <CardContent className="pt-6">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<CheckCircle2 className="h-5 w-5 text-green-600 mt-0.5" /> <CheckCircle2 className="h-5 w-5 text-green-600 mt-0.5 shrink-0" />
<div> <div className="space-y-1">
<p className="font-medium text-green-900 dark:text-green-100">Project created successfully!</p> <p className="font-medium text-green-900 dark:text-green-100">
<p className="text-sm text-green-700 dark:text-green-300 mt-1"> {productName} is ready
Project ID: <code className="font-mono">{createdProjectId}</code>
</p> </p>
</div> {createdGiteaRepo ? (
</div>
</CardContent>
</Card>
<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 in your project root:
</p>
<div className="relative">
<pre className="bg-muted p-4 rounded-lg text-sm font-mono overflow-x-auto">
{`{
"projectId": "${createdProjectId}",
"version": "1.0.0"
}`}
</pre>
<Button
size="sm"
variant="ghost"
className="absolute top-2 right-2"
onClick={() => copyToClipboard(`{\n "projectId": "${createdProjectId}",\n "version": "1.0.0"\n}`)}
>
<Copy className="h-4 w-4" />
</Button>
</div>
{selectedRepo && (
<div className="flex items-center gap-2 pt-2">
<Github className="h-4 w-4 text-muted-foreground" />
<a <a
href={selectedRepo.html_url} href={createdGiteaRepo.repoUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-sm text-primary hover:underline flex items-center gap-1" className="text-sm text-green-700 dark:text-green-300 hover:underline flex items-center gap-1"
> >
Open {selectedRepo.full_name} <Github className="h-3.5 w-3.5" />
{createdGiteaRepo.repo}
<ExternalLink className="h-3 w-3" /> <ExternalLink className="h-3 w-3" />
</a> </a>
</div> ) : (
<p className="text-sm text-green-700 dark:text-green-300">
Gitea repo provisioning skipped
</p>
)} )}
</div>
</div>
</CardContent> </CardContent>
</Card> </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>
</ul>
</div>
<div className="flex gap-3"> <div className="flex gap-3">
<Button <a
variant="outline" href="https://theia.vibnai.com"
onClick={() => copyToClipboard(`{\n "projectId": "${createdProjectId}",\n "version": "1.0.0"\n}`)} target="_blank"
rel="noopener noreferrer"
className="flex-1" className="flex-1"
> >
<Copy className="mr-2 h-4 w-4" /> <Button variant="outline" className="w-full">
Copy .vibn Content Open IDE
</Button> </Button>
</a>
<Button onClick={handleFinish} className="flex-1" size="lg"> <Button onClick={handleFinish} className="flex-1" size="lg">
Start AI Chat Go to Project
</Button> </Button>
</div> </div>
</div> </div>