Show onboarding banner to link to YT video & do not show release note on first-time (#1490)

src/components/SetupBanner.tsx

@@ -30,6 +30,7 @@ import { useLanguageModelProviders } from "@/hooks/useLanguageModelProviders";
 import { useScrollAndNavigateTo } from "@/hooks/useScrollAndNavigateTo";
 // @ts-ignore
 import logo from "../../assets/logo.svg";
+import { OnboardingBanner } from "./home/OnboardingBanner";
 
 type NodeInstallStep =
   | "install"
@@ -40,6 +41,7 @@ type NodeInstallStep =
 export function SetupBanner() {
   const posthog = usePostHog();
   const navigate = useNavigate();
+  const [isOnboardingVisible, setIsOnboardingVisible] = useState(true);
   const { isAnyProviderSetup, isLoading: loading } =
     useLanguageModelProviders();
   const [nodeSystemInfo, setNodeSystemInfo] = useState<NodeSystemInfo | null>(
@@ -147,7 +149,13 @@ export function SetupBanner() {
 
   return (
     <>
-      <p className="text-xl text-zinc-700 dark:text-zinc-300 p-4">Setup Dyad</p>
+      <p className="text-xl font-medium text-zinc-700 dark:text-zinc-300 p-4">
+        Setup Dyad
+      </p>
+      <OnboardingBanner
+        isVisible={isOnboardingVisible}
+        setIsVisible={setIsOnboardingVisible}
+      />
       <div className={bannerClasses}>
         <Accordion
           type="multiple"

src/components/home/OnboardingBanner.tsx

+import { IpcClient } from "@/ipc/ipc_client";
+import { Play } from "lucide-react";
+
+export const OnboardingBanner = ({
+  isVisible,
+  setIsVisible,
+}: {
+  isVisible: boolean;
+  setIsVisible: (isVisible: boolean) => void;
+}) => {
+  if (!isVisible) return null;
+
+  return (
+    // <div className="fixed top-0 left-0 right-0 z-50 flex justify-center mt-2">
+    <div className="max-w-xl w-full mx-4 relative mb-4">
+      <a
+        onClick={(e) => {
+          e.preventDefault();
+          IpcClient.getInstance().openExternalUrl(
+            "https://www.youtube.com/watch?v=rgdNoHLaRN4",
+          );
+          setIsVisible(false);
+        }}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="cursor-pointer block bg-(--background-lightest) border border-border rounded-lg shadow-lg hover:bg-accent transition-colors"
+      >
+        <div className="flex items-center">
+          <div className="relative p-2">
+            <img
+              src="https://img.youtube.com/vi/rgdNoHLaRN4/maxresdefault.jpg"
+              alt="Get started with Dyad in 3 minutes"
+              className="w-28 h-16 object-cover rounded-md"
+            />
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="w-10 h-10 bg-background rounded-full flex items-center justify-center shadow-md">
+                <Play size={20} className="text-foreground ml-0.5" />
+              </div>
+            </div>
+          </div>
+          <div className="flex-1 px-4 py-3">
+            <div className="text-foreground">
+              <p className="font-semibold text-base">
+                Get started with Dyad in 3 minutes
+              </p>
+              <p className="text-sm text-muted-foreground">
+                Start building your app for free
+              </p>
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
+    // </div>
+  );
+};

src/pages/home.tsx

@@ -62,9 +62,15 @@ export default function HomePage() {
         settings &&
         settings.lastShownReleaseNotesVersion !== appVersion
       ) {
+        const shouldShowReleaseNotes = !!settings.lastShownReleaseNotesVersion;
         await updateSettings({
           lastShownReleaseNotesVersion: appVersion,
         });
+        // It feels spammy to show release notes if it's
+        // the users very first time.
+        if (!shouldShowReleaseNotes) {
+          return;
+        }
 
         try {
           const result = await IpcClient.getInstance().doesReleaseNoteExist({