From c1f011e45091815b2e88d610c4d46cd9464e5109 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 30 Sep 2025 21:06:31 +0000
Subject: [PATCH] Add search param state management

cgen-57d716cbe2fd40efa27ad09f8429bde8
---
 client/pages/Dashboard.tsx | 61 +++++++++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/client/pages/Dashboard.tsx b/client/pages/Dashboard.tsx
index ba8fef02..408f466c 100644
--- a/client/pages/Dashboard.tsx
+++ b/client/pages/Dashboard.tsx
@@ -88,6 +88,8 @@ export default function Dashboard() {
   const [userPosts, setUserPosts] = useState<any[]>([]);
   const [applications, setApplications] = useState<any[]>([]);
   const [connectionAction, setConnectionAction] = useState<string | null>(null);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [activeTab, setActiveTab] = useState(() => searchParams.get("tab") ?? "profile");
 
   const linkedProviderMap = useMemo(() => {
     const map: Record<string, (typeof linkedProviders)[number]> = {};
@@ -97,24 +99,47 @@ export default function Dashboard() {
     return map;
   }, [linkedProviders]);
 
-  const oauthConnections = useMemo(
-    () =>
-      [
-        {
-          provider: "google" as ProviderKey,
-          name: "Google",
-          description: "Link your Google account for one-click access.",
-          Icon: Globe,
-          gradient: "from-red-500 to-yellow-500",
-        },
-        {
-          provider: "github" as ProviderKey,
-          name: "GitHub",
-          description: "Connect your GitHub account to sync contributions.",
-          Icon: Github,
-          gradient: "from-gray-600 to-gray-900",
-        },
-      ] as const,
+  useEffect(() => {
+    const paramTab = searchParams.get("tab") ?? "profile";
+    if (paramTab !== activeTab) {
+      setActiveTab(paramTab);
+    }
+  }, [searchParams, activeTab]);
+
+  const handleTabChange = (value: string) => {
+    setActiveTab(value);
+    const next = new URLSearchParams(searchParams);
+    if (value === "profile") {
+      if (next.has("tab")) {
+        next.delete("tab");
+        setSearchParams(next, { replace: true });
+      }
+      return;
+    }
+
+    if (next.get("tab") !== value) {
+      next.set("tab", value);
+      setSearchParams(next, { replace: true });
+    }
+  };
+
+  const oauthConnections = useMemo<readonly ProviderDescriptor[]>(
+    () => [
+      {
+        provider: "google",
+        name: "Google",
+        description: "Link your Google account for one-click access.",
+        Icon: Globe,
+        gradient: "from-red-500 to-yellow-500",
+      },
+      {
+        provider: "github",
+        name: "GitHub",
+        description: "Connect your GitHub account to sync contributions.",
+        Icon: Github,
+        gradient: "from-gray-600 to-gray-900",
+      },
+    ],
     [],
   );