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

<!-- This is an auto-generated description by cubic. -->

## Summary by cubic
Adds an onboarding banner in Setup that links to a 3-minute YouTube
intro and dismisses after click. Also avoids showing release notes on a
user’s first launch.

- **New Features**
- Added OnboardingBanner component with YouTube thumbnail and play icon.
  - Opens the video via IpcClient and hides the banner after click.
  - Integrated into SetupBanner with local visibility state.

- **Bug Fixes**
  - Don’t show release notes on first run to prevent spam.

<!-- End of auto-generated description by cubic. -->

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds a dismissible onboarding banner linking to a YouTube intro and
changes release notes to appear only on app updates, not first run.
> 
> - **UI/Onboarding**:
> - **`src/components/home/OnboardingBanner.tsx`**: New banner component
with YouTube thumbnail/play icon; opens intro video via
`IpcClient.openExternalUrl`; hides itself on click.
> - **`src/components/SetupBanner.tsx`**: Integrates `OnboardingBanner`
with `isOnboardingVisible` state; tweaks header typography
(`font-medium`).
> - **Release Notes Behavior**:
> - **`src/pages/home.tsx`**: Only shows release notes when upgrading
(checks existing `settings.lastShownReleaseNotesVersion` before opening
modal); preserves themed URL handling.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
832e70f87b3b6a7e8b8b921fe8c6ceb15198cce0. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
This commit is contained in:
Will Chen
2025-10-09 13:27:16 -07:00
committed by GitHub
parent 83126a7e65
commit 916d6fdb63
3 changed files with 71 additions and 1 deletions

View File

@@ -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"