fix: ensure the selected tab updates when switching tabs

[stnguyen90]

What does this PR do?

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.

Test Plan

Manually tested:

Screen.Recording.2026-03-05.at.08.59.45.mov

Related PRs and Issues

None

Have you read the Contributing Guidelines on issues?

Yes

Summary by CodeRabbit

• Bug Fixes
  • Updated the navigation path for creating a new Dev Key to follow the correct workflow.

[appwrite]

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

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

Tip

JWT tokens let functions act on behalf of users while preserving their permissions

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cf69c471-ff16-4a6b-910e-bc962fd36c30

📥 Commits

Reviewing files that changed from the base of the PR and between 6138b73 and 751a45d.

📒 Files selected for processing (1)

• src/routes/(console)/project-[region]-[project]/overview/+layout.svelte

---

Walkthrough

This pull request refactors the tab selection mechanism in a project overview layout component. The old isTabSelected(key) helper function was removed and replaced with a pathParts array derived from page.url.pathname. Tab selection now uses pathParts.includes('<segment>') checks for platforms, api-keys, and dev-keys tabs. Additionally, the navigation action for "Create Dev Key" was updated from /dev-keys/create to /dev-keys.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main fix: ensuring selected tabs update when switching between them, which directly addresses the core issue resolved in this changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-SUC-1980-fix-integration-tabs

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[greptile-apps]

Greptile Summary

This PR fixes a Svelte 5 legacy mode reactivity issue where the active tab in the Integrations section of the project overview was not updating when navigating between tabs. It also corrects a broken command palette shortcut for creating dev keys.

• Root cause fixed: isTabSelected() was a function closure that captured page.url.pathname — in Svelte 5 legacy mode, reactive state accessed inside a function closure does not establish a reactive dependency in the template. Moving the page.url.pathname.split('/') call directly into the template as {@const pathParts = ...} ensures Svelte tracks it as a reactive dependency and re-renders when the URL changes.
• Improved sub-route highlighting: The old endsWith() check meant that navigating to a sub-page like /api-keys/create would deselect the "API Keys" tab. The new pathParts.includes() approach correctly keeps the parent tab highlighted on any sub-route.
• Dev key navigation fixed: The goto in the command palette "Create Dev Key" callback was pointing to ${path}/dev-keys/create, which has no corresponding route — unlike API keys which do have a dedicated /create sub-page. The corrected destination ${path}/dev-keys is the actual route where dev key creation is handled via the $action context mechanism.

Confidence Score: 5/5

• This PR is safe to merge — both changes are well-scoped fixes with no risk of regression.
• The fix is minimal and targeted: moving reactive state access into the template is the canonical Svelte 5 solution for this class of reactivity bug, and the dev-keys navigation correction aligns with the actual route structure (no /dev-keys/create page exists). No new logic is introduced and the pathParts.includes() approach is safe given the path segment naming conventions used in this app.
• No files require special attention.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User navigates to /overview tab] --> B{page.url.pathname}
    B --> C["pathParts = pathname.split('/')"]
    C --> D{Check each Tab}
    D --> E["pathParts.includes('platforms')"]
    D --> F["pathParts.includes('api-keys')"]
    D --> G["pathParts.includes('dev-keys')"]
    E -->|true| H[Platforms tab selected]
    F -->|true| I[API Keys tab selected]
    G -->|true| J[Dev Keys tab selected]
    H --> K[Tab UI updates reactively]
    I --> K
    J --> K
    K --> L{Command palette 'Create Dev Key'}
    L --> M["goto(path + '/dev-keys')"]
    M --> N[Navigate to /dev-keys list page]

Loading

_{Last reviewed commit: 751a45d}