Update setup banner: navigate to settings#ai & Dyad Pro option (#1361)

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

## Summary by cubic
Updated the setup banner to navigate to Settings and auto-scroll to the
AI Providers section, and added a Dyad Pro setup option to streamline
onboarding.

- **New Features**
  - Added “Setup Dyad Pro” card with logo; opens Dyad Pro signup.
- “Other providers” now jumps to Settings → Provider section with smooth
scroll.
  - OpenRouter setup card updated with new teal styling.

- **Refactors**
- Introduced useScrollAndNavigateTo hook to navigate, scroll, and set
active section.
- Centralized active section state via activeSettingsSectionAtom (used
by SettingsList).
  - SetupProviderCard supports a new “dyad” variant styling.

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

src/components/SettingsList.tsx

@@ -1,7 +1,9 @@
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
-import { useNavigate } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
+import { useScrollAndNavigateTo } from "@/hooks/useScrollAndNavigateTo";
+import { useAtom } from "jotai";
+import { activeSettingsSectionAtom } from "@/atoms/viewAtoms";
 
 const SETTINGS_SECTIONS = [
   { id: "general-settings", label: "General" },
@@ -16,10 +18,11 @@ const SETTINGS_SECTIONS = [
 ];
 
 export function SettingsList({ show }: { show: boolean }) {
-  const navigate = useNavigate();
-  const [activeSection, setActiveSection] = useState<string | null>(
-    "general-settings",
-  );
+  const [activeSection, setActiveSection] = useAtom(activeSettingsSectionAtom);
+  const scrollAndNavigateTo = useScrollAndNavigateTo("/settings", {
+    behavior: "smooth",
+    block: "start",
+  });
 
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -50,16 +53,7 @@ export function SettingsList({ show }: { show: boolean }) {
     return null;
   }
 
-  const handleScrollAndNavigateTo = async (id: string) => {
-    await navigate({
-      to: "/settings",
-    });
-    const element = document.getElementById(id);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth", block: "start" });
-      setActiveSection(id);
-    }
-  };
+  const handleScrollAndNavigateTo = scrollAndNavigateTo;
 
   return (
     <div className="flex flex-col h-full">