From 860c427f2873cbed50c271e1e191aeee30980391 Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Wed, 23 Apr 2025 11:35:04 -0700
Subject: [PATCH] show success UX for dyad add integration

---
 src/components/chat/DyadAddIntegration.tsx | 42 ++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/src/components/chat/DyadAddIntegration.tsx b/src/components/chat/DyadAddIntegration.tsx
index 4674828..2cc3dce 100644
--- a/src/components/chat/DyadAddIntegration.tsx
+++ b/src/components/chat/DyadAddIntegration.tsx
@@ -6,6 +6,7 @@ import { useAtomValue, atom, useAtom } from "jotai";
 import { showError } from "@/lib/toast";
 import { useStreamChat } from "@/hooks/useStreamChat";
 import { selectedChatIdAtom } from "@/atoms/chatAtoms";
+import { useLoadApp } from "@/hooks/useLoadApp";
 
 interface DyadAddIntegrationProps {
   node: {
@@ -25,8 +26,10 @@ export const DyadAddIntegration: React.FC<DyadAddIntegrationProps> = ({
   const { streamMessage } = useStreamChat();
   const [isSetup, setIsSetup] = useAtom(isSetupAtom);
   const navigate = useNavigate();
+
   const { provider } = node.properties;
   const appId = useAtomValue(selectedAppIdAtom);
+  const { app } = useLoadApp(appId);
   const selectedChatId = useAtomValue(selectedChatIdAtom);
 
   const handleSetupClick = () => {
@@ -38,6 +41,45 @@ export const DyadAddIntegration: React.FC<DyadAddIntegrationProps> = ({
     setIsSetup(true);
   };
 
+  if (app?.supabaseProjectName) {
+    return (
+      <div className="flex flex-col  my-2 p-3 border border-green-300 rounded-lg bg-green-50 shadow-sm">
+        <div className="flex items-center space-x-2">
+          <svg
+            className="w-5 h-5 text-green-600"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            viewBox="0 0 24 24"
+          >
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="2"
+              fill="#bbf7d0"
+            />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M9 12l2 2 4-4"
+            />
+          </svg>
+          <span className="font-semibold text-green-800">
+            Supabase integration complete
+          </span>
+        </div>
+        <div className="text-sm text-green-900">
+          This app is connected to Supabase project:{" "}
+          <span className="font-mono font-medium bg-green-100 px-1 py-0.5 rounded">
+            {app.supabaseProjectName}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
   if (isSetup) {
     return (
       <Button