VIBN Frontend for Coolify deployment

2026-02-15 19:25:52 -08:00
commit 40bf8428cd
398 changed files with 76513 additions and 0 deletions
--- a/components/layout/connect-sources-modal.tsx
+++ b/components/layout/connect-sources-modal.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Github, Sparkles, Check } from "lucide-react";
+import { toast } from "sonner";
+import { CursorIcon } from "@/components/icons/custom-icons";
+
+interface ConnectSourcesModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectId: string;
+}
+
+// Mock connection states - these would come from your database in production
+const useConnectionStates = () => {
+  const [connections, setConnections] = useState({
+    vibn: false,
+    chatgpt: false,
+    github: false,
+    v0: false,
+  });
+
+  return { connections, setConnections };
+};
+
+export function ConnectSourcesModal({
+  open,
+  onOpenChange,
+  projectId,
+}: ConnectSourcesModalProps) {
+  const { connections, setConnections } = useConnectionStates();
+
+  const handleConnect = async (source: "vibn" | "chatgpt" | "github" | "v0") => {
+    // Mock connection logic - replace with actual OAuth/API integration
+    const sourceName = source === "vibn" ? "Vib'n Extension" : source === "chatgpt" ? "ChatGPT" : source === "github" ? "GitHub" : "v0";
+    toast.success(`Connecting to ${sourceName}...`);
+    
+    // Simulate connection delay
+    setTimeout(() => {
+      setConnections((prev) => ({ ...prev, [source]: true }));
+      toast.success(`${sourceName} connected successfully!`);
+    }, 1000);
+  };
+
+  const handleDisconnect = (source: "vibn" | "chatgpt" | "github" | "v0") => {
+    const sourceName = source === "vibn" ? "Vib'n Extension" : source === "chatgpt" ? "ChatGPT" : source === "github" ? "GitHub" : "v0";
+    setConnections((prev) => ({ ...prev, [source]: false }));
+    toast.success(`${sourceName} disconnected`);
+  };
+
+  const sources = [
+    {
+      id: "vibn" as const,
+      name: "Vib'n Extension",
+      description: "Connect the Vib'n extension with Cursor for seamless development tracking",
+      icon: CursorIcon,
+      color: "text-foreground",
+      bgColor: "bg-primary/10",
+    },
+    {
+      id: "chatgpt" as const,
+      name: "ChatGPT",
+      description: "Connect your ChatGPT project for AI-powered insights and context",
+      icon: Sparkles,
+      color: "text-green-500",
+      bgColor: "bg-green-500/10",
+    },
+    {
+      id: "github" as const,
+      name: "GitHub",
+      description: "Sync your repository to track code changes and generate screens",
+      icon: Github,
+      color: "text-foreground",
+      bgColor: "bg-foreground/10",
+    },
+    {
+      id: "v0" as const,
+      name: "v0",
+      description: "Connect v0 to generate and iterate on UI designs",
+      icon: Sparkles,
+      color: "text-blue-500",
+      bgColor: "bg-blue-500/10",
+    },
+  ];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Connect Sources</DialogTitle>
+          <DialogDescription>
+            Connect external sources to enhance your product development workflow
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3 mt-4">
+          {sources.map((source) => {
+            const Icon = source.icon;
+            const isConnected = connections[source.id];
+
+            return (
+              <Card key={source.id} className={isConnected ? "border-primary" : ""}>
+                <CardContent className="p-4">
+                  <div className="flex items-start gap-4">
+                    <div className={`p-2.5 rounded-lg ${source.bgColor} shrink-0`}>
+                      <Icon className={`h-5 w-5 ${source.color}`} />
+                    </div>
+                    
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <h3 className="font-semibold text-sm">{source.name}</h3>
+                        {isConnected && (
+                          <div className="flex items-center gap-1 text-xs text-green-600 bg-green-500/10 px-2 py-0.5 rounded-full">
+                            <Check className="h-3 w-3" />
+                            Connected
+                          </div>
+                        )}
+                      </div>
+                      <p className="text-sm text-muted-foreground">
+                        {source.description}
+                      </p>
+                    </div>
+
+                    <div className="shrink-0">
+                      {isConnected ? (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleDisconnect(source.id)}
+                        >
+                          Disconnect
+                        </Button>
+                      ) : (
+                        <Button
+                          size="sm"
+                          onClick={() => handleConnect(source.id)}
+                        >
+                          Connect
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+