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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user