Fix tab selection issue in Integrations section (#2893)

[soufiane-amt]

What I did

Fixed the issue #2893 where the Integrations tabs always highlighted the default Platforms tab, regardless of which tab was clicked.

Wrapped the component with a {#key page.url.pathname} block to ensure Svelte properly re-renders the active tab when the URL changes.

Updated the selected attribute for each to use the isTabSelected function consistently, ensuring the correct tab is highlighted immediately upon click.

Issue

Bug: The Integrations tabs were not visually responsive to user selection.
Reproduction:

Go to Personal projects.

Click on a project.

Scroll down to the Integrations section.

Click any tab — the content updates correctly, but the tab highlight always stays on Platforms.

Expected behavior: The clicked tab should be highlighted.
Actual behavior: The default tab (Platforms) is always highlighted, even when another tab is active.

How I fixed it

Added a {#key page.url.pathname} block around the component to force Svelte to re-render the tab set when the route changes.

Ensured the selected state is correctly evaluated for each tab using isTabSelected(event).

Before the fix:

Recording.2026-02-27.212858.mp4

After the fix:

after.mp4

Summary by CodeRabbit

• Bug Fixes
  • Fixed an issue where navigation tabs were not properly resetting their state when moving between different pages in the console, ensuring a cleaner browsing experience with correct tab selection on each page visit.

[appwrite]

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

Site	Status	Logs	Preview	QR
console-stage 688b7cf6003b1842c9dc	Failed	Authorize	Preview URL

Tip

Storage files get ClamAV malware scanning and encryption by default

[coderabbitai]

Walkthrough

A Svelte layout file's Tabs component is now wrapped in a keyed block that uses page.url.pathname as the reactive key. Previously rendered unconditionally, the Tabs component now re-renders whenever the page URL pathname changes, resetting its state during navigation. The surrounding integration actions and conditional rendering logic remain unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main fix - addressing a tab selection display issue in the Integrations section, directly matching the changeset's purpose.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ 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

---

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

Fixed tab selection highlighting in the Integrations section by wrapping the <Tabs> component with {#key page.url.pathname}. This forces Svelte to re-render the tabs when the URL changes, ensuring the correct tab is visually highlighted when clicked.

• Applied a common codebase pattern for handling Svelte reactivity issues (48 other files use {#key})
• Minimal performance impact (only 3 simple tabs being re-rendered)
• The root cause appears to be a reactivity issue with the two-way binding (bind:active={selected}) in the Tab component not properly syncing when the URL changes
• The fix is pragmatic and solves the user-facing issue effectively

Confidence Score: 5/5

• This PR is safe to merge with no risk
• Simple, targeted fix using an established codebase pattern; only affects tab UI rendering with no logic changes; no breaking changes or side effects
• No files require special attention

Important Files Changed

Filename	Overview
src/routes/(console)/project-[region]-[project]/overview/+layout.svelte	Wraps Tabs component with {#key page.url.pathname} to force re-render on navigation, fixing tab highlight issue

_{Last reviewed commit: ecc8c64}