From 751a45dba559fe63c37c2d668561631fc5d5af1a Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 5 Mar 2026 08:55:38 -0800
Subject: [PATCH] fix: ensure the selected tab updates when switching tabs

`page.url.pathname`` was accessed inside the `isTabSelected()`` function closure. In Svelte 5 legacy mode components, reactive state accessed inside a function closure does not create a reactive dependency in the template - so the tab selection was computed once at layout mount (always on `/platforms` due to the redirect) and never updated on navigation.
---
 .../overview/+layout.svelte                         | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte b/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte
index 4c6fb4341a..54c5cea1d4 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte
@@ -52,10 +52,6 @@
         return usage.load(dates.start, dates.end, dates.period);
     }
 
-    function isTabSelected(key: string) {
-        return page.url.pathname.endsWith(`/${key}`);
-    }
-
     $: $registerCommands([
         {
             label: 'Add platform',
@@ -81,7 +77,7 @@
             label: 'Create Dev Key',
             icon: IconPlus,
             callback() {
-                goto(`${path}/dev-keys/create`);
+                goto(`${path}/dev-keys`);
             },
             keys: ['c', 'd', 'k'],
             group: 'integrations',
@@ -223,21 +219,22 @@
             <Typography.Title>Integrations</Typography.Title>
             <Layout.Stack gap="xl" direction="row" justifyContent="space-between">
                 <Tabs>
+                    {@const pathParts = page.url.pathname.split('/')}
                     <Tab
                         noscroll
                         event="platforms"
                         href={`${path}/platforms`}
-                        selected={isTabSelected('platforms')}>Platforms</Tab>
+                        selected={pathParts.includes('platforms')}>Platforms</Tab>
                     <Tab
                         noscroll
                         event="api-keys"
                         href={`${path}/api-keys`}
-                        selected={isTabSelected('api-keys')}>API keys</Tab>
+                        selected={pathParts.includes('api-keys')}>API keys</Tab>
                     <Tab
                         noscroll
                         event="dev-keys"
                         href={`${path}/dev-keys`}
-                        selected={isTabSelected('dev-keys')}>Dev keys</Tab>
+                        selected={pathParts.includes('dev-keys')}>Dev keys</Tab>
                 </Tabs>
                 {#if $action}
                     <svelte:component this={$action} />