add buttons for dyad pro (#1494)

src/components/ProBanner.tsx

@@ -6,9 +6,11 @@ import googleLogo from "../../assets/ai-logos/google-logo.svg";
 import anthropicLogo from "../../assets/ai-logos/anthropic-logo.svg";
 import { IpcClient } from "@/ipc/ipc_client";
 import { useState } from "react";
+import { KeyRound } from "lucide-react";
 
 import { useSettings } from "@/hooks/useSettings";
 import { useUserBudgetInfo } from "@/hooks/useUserBudgetInfo";
+import { Button } from "./ui/button";
 
 export function ProBanner() {
   const { settings } = useSettings();
@@ -20,7 +22,11 @@ export function ProBanner() {
   });
 
   if (settings?.enableDyadPro || userBudget) {
-    return null;
+    return (
+      <div className="mt-6 max-w-2xl mx-auto">
+        <ManageDyadProButton />
+      </div>
+    );
   }
 
   return (
@@ -32,10 +38,47 @@ export function ProBanner() {
       ) : (
         <TurboBanner />
       )}
+      <SetupDyadProButton />
     </div>
   );
 }
 
+export function ManageDyadProButton() {
+  return (
+    <Button
+      variant="outline"
+      size="lg"
+      className="w-full mt-4 bg-(--background-lighter) text-primary"
+      onClick={() => {
+        IpcClient.getInstance().openExternalUrl(
+          "https://academy.dyad.sh/subscription",
+        );
+      }}
+    >
+      <KeyRound aria-hidden="true" />
+      Manage Dyad Pro subscription
+    </Button>
+  );
+}
+
+export function SetupDyadProButton() {
+  return (
+    <Button
+      variant="outline"
+      size="lg"
+      className="w-full mt-4 bg-(--background-lighter) text-primary"
+      onClick={() => {
+        IpcClient.getInstance().openExternalUrl(
+          "https://academy.dyad.sh/settings",
+        );
+      }}
+    >
+      <KeyRound aria-hidden="true" />
+      Already have Dyad Pro? Add your key
+    </Button>
+  );
+}
+
 export function AiAccessBanner() {
   return (
     <div