From 763114df6fb7298ddf14c0ad9998d54077e44843 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Sun, 28 Jun 2026 22:19:51 +0800
Subject: [PATCH] fix: correct 'Manage API Keys' link from /pair success screen

- Profile page now reads ?tab= query param to open Settings tab directly
- Settings container reads ?subtab= query param to open API Keys directly
- /pair success link updated to /profile?tab=settings&subtab=api-keys (was /profile/settings?tab=api-keys which 404'd)
---
 apps/web/app/pair/page.tsx                         |  2 +-
 apps/web/app/profile/page.tsx                      |  7 ++++++-
 apps/web/components/profile/settings-container.tsx | 10 +++++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/pair/page.tsx b/apps/web/app/pair/page.tsx
index b7f3b69..9bfecaf 100644
--- a/apps/web/app/pair/page.tsx
+++ b/apps/web/app/pair/page.tsx
@@ -170,7 +170,7 @@ function PairContent() {
                     was created. You can close this page and return to your Steam Deck.
                 </p>
                 <Link
-                    href="/profile/settings?tab=api-keys"
+                    href="/profile?tab=settings&subtab=api-keys"
                     className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary/90 transition-colors"
                 >
                     Manage API Keys
diff --git a/apps/web/app/profile/page.tsx b/apps/web/app/profile/page.tsx
index c3ec0eb..f75e8ce 100644
--- a/apps/web/app/profile/page.tsx
+++ b/apps/web/app/profile/page.tsx
@@ -17,7 +17,12 @@ type Tab = "overview" | "saved" | "settings"
 export default function ProfilePage() {
     const router = useRouter()
     const { data: session, isPending: isSessionLoading } = useSession()
-    const [activeTab, setActiveTab] = useState<Tab>("overview")
+    const [activeTab, setActiveTab] = useState<Tab>(() => {
+        if (typeof window === "undefined") return "overview"
+        const params = new URLSearchParams(window.location.search)
+        const t = params.get("tab")
+        return t === "settings" || t === "saved" ? (t as Tab) : "overview"
+    })
     const [profile, setProfile] = useState<{
         id: string
         name: string
diff --git a/apps/web/components/profile/settings-container.tsx b/apps/web/components/profile/settings-container.tsx
index f9a0820..365aec9 100644
--- a/apps/web/components/profile/settings-container.tsx
+++ b/apps/web/components/profile/settings-container.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { useState, useEffect } from "react"
+import { useSearchParams } from "next/navigation"
 import { User, Shield, Link as LinkIcon, Key } from "lucide-react"
 import { SettingsProfileTab } from "@/components/profile/settings-profile-tab"
 import { SettingsSecurityTab } from "@/components/profile/settings-security-tab"
@@ -16,6 +17,8 @@ interface AuthMethods {
 
 type SettingsSubTab = "profile" | "security" | "accounts" | "api-keys"
 
+const VALID_SUBTABS: SettingsSubTab[] = ["profile", "security", "accounts", "api-keys"]
+
 const subTabs: { id: SettingsSubTab; label: string; icon: typeof User }[] = [
     { id: "profile", label: "Profile", icon: User },
     { id: "security", label: "Security", icon: Shield },
@@ -42,7 +45,12 @@ export function SettingsContainer({
     userId,
     onImageChange,
 }: SettingsContainerProps) {
-    const [activeSubTab, setActiveSubTab] = useState<SettingsSubTab>("profile")
+    const [activeSubTab, setActiveSubTab] = useState<SettingsSubTab>(() => {
+        if (typeof window === "undefined") return "profile"
+        const params = new URLSearchParams(window.location.search)
+        const sub = params.get("subtab")
+        return sub && VALID_SUBTABS.includes(sub as SettingsSubTab) ? (sub as SettingsSubTab) : "profile"
+    })
     const [authMethods, setAuthMethods] = useState<AuthMethods | null>(null)
     const [isLoadingAuthMethods, setIsLoadingAuthMethods] = useState(true)