Fix Integrations tab not reflecting active route

[Copilot]

The active tab in the Integrations section of the project overview page was not correctly reflecting the current route — both on simple routes (e.g. /overview/api-keys) and nested routes (e.g. /overview/api-keys/create).

Root Cause

Two issues combined to cause the bug:

1. Reactivity: 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.

2. Nested route matching: endsWith() fails for nested routes like /api-keys/create since the path no longer ends with /api-keys.

Fix

isTabSelected() now accepts pathname as a parameter, and page.url.pathname is passed directly from the template expression. This ensures Svelte's reactivity system properly tracks the dependency and re-evaluates on navigation — matching the pattern used in account/header.svelte and auth/header.svelte.

Path-segment matching (split('/').includes(key)) replaces endsWith() to correctly handle both simple and nested routes without partial-string false positives.

- function isTabSelected(key: string) {
-     return page.url.pathname.endsWith(`/${key}`);
- }
+ function isTabSelected(key: string, pathname: string) {
+     return pathname.split('/').includes(key);
+ }

- selected={isTabSelected('platforms')}
+ selected={isTabSelected('platforms', page.url.pathname)}

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[appwrite]

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

Site	Status	Logs	Preview	QR
console-stage 688b7cf6003b1842c9dc	Ready	View Logs	Preview URL

Tip

Roll back Sites deployments instantly by switching between versions

[stnguyen90]

@copilot this is not the issue. The tab is incorrect even when I'm on /project-x-y/overview/api-keys

[Copilot]

You're right - the actual issue was that page.url.pathname accessed inside a function closure isn't reactive in Svelte 5 legacy mode. The reactive dependency needs to be directly in the template expression, which is the pattern used in account/header.svelte and auth/header.svelte.

Fixed in commit 010f2f8: isTabSelected now accepts pathname as a parameter, and page.url.pathname is passed directly from the template — ensuring the template re-evaluates reactively on navigation.

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• o1.ingest.sentry.io
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/console/console/node_modules/.bin/vitest run (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[stnguyen90]

the reactivity issue was the problem. is there a cleaner approach?