mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update project creation modal success screen

Browse Source 
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:
Mark Henderson
2026-02-19 10:59:30 -08:00
parent 6668cc84fa
commit a281d4d373
1 changed files with 59 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
components/project-creation-modal.tsx
View File

@@ -16,9 +16,9 @@ import {
Github,
Loader2,
CheckCircle2,
Copy,
XCircle,
ExternalLink,
ChevronLeft
ChevronLeft,
} from 'lucide-react';
import { toast } from 'sonner';
import { Card, CardContent } from '@/components/ui/card';
@@ -43,6 +43,7 @@ export function ProjectCreationModal({
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 [loading, setLoading] = useState(false);
const [githubConnected, setGithubConnected] = useState(false);
@@ -88,6 +89,7 @@ export function ProjectCreationModal({
setProductName('');
setSelectedRepo(null);
setCreatedProjectId(null);
setCreatedGiteaRepo(null);
setLoading(false);
};
@@ -120,6 +122,7 @@ export function ProjectCreationModal({
if (response.ok) {
const data = await response.json();
setCreatedProjectId(data.projectId);
if (data.gitea) setCreatedGiteaRepo(data.gitea);
toast.success('Project created!');
setStep(3);
} else {
@@ -134,11 +137,6 @@ export function ProjectCreationModal({
}
};
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
toast.success('Copied to clipboard!');
};
const handleFinish = () => {
onOpenChange(false);
if (createdProjectId) {
@@ -275,66 +273,71 @@ export function ProjectCreationModal({
<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" />
<div>
<p className="font-medium text-green-900 dark:text-green-100">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>
<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>
</div>
</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" />
{createdGiteaRepo ? (
<a
href={selectedRepo.html_url}
href={createdGiteaRepo.repoUrl}
target="_blank"
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" />
</a>
</div>
) : (
<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>
</ul>
</div>
<div className="flex gap-3">
<Button
variant="outline"
onClick={() => copyToClipboard(`{\n "projectId": "${createdProjectId}",\n "version": "1.0.0"\n}`)}
<a
href="https://theia.vibnai.com"
target="_blank"
rel="noopener noreferrer"
className="flex-1"
>
<Copy className="mr-2 h-4 w-4" />
Copy .vibn Content
<Button variant="outline" className="w-full">
Open IDE
</Button>
</a>
<Button onClick={handleFinish} className="flex-1" size="lg">
Start AI Chat
Go to Project
</Button>
</div>
</div>