fix: tab selection not working for integrations

[HarshMN2345]

What does this PR do?

Fixes: #2909

Test Plan

(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)

Related PRs and Issues

(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)

Have you read the Contributing Guidelines on issues?

(Write your answer here.)

Summary by CodeRabbit

• Refactor
  • Redesigned the Integrations area to use reactive tab and command handling, improving tab selection, dynamic ranking, and command registration for a more responsive UI.
• Chore
  • Added a package override for an underlying dependency to align versions and stabilize builds.

[appwrite]

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

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

Tip

Global CDN and DDoS protection come free with every Sites deployment

[coderabbitai]

Warning

Rate limit exceeded

@HarshMN2345 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 4 minutes and 6 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c7fe148d-70be-4e89-a01d-1f8e07405446

📥 Commits

Reviewing files that changed from the base of the PR and between 543a4cf and e1a184a.

⛔ Files ignored due to path filters (1)

• bun.lock is excluded by !**/*.lock

📒 Files selected for processing (1)

• package.json

Walkthrough

Refactors a Svelte layout component: updates the module script declaration, imports isTabSelected, replaces local tab selection logic with a derived path and integrationTabs array, initializes period from $state('30d'), and moves command registration and integrations ranking into a reactive $effect that registers three commands. Rendering of integration tabs now iterates integrationTabs, using the imported isTabSelected signature. Additionally, package.json adds an overrides entry for immutable set to ">=5.1.5".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 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 'fix: tab selection not working for integrations' clearly and specifically summarizes the main change: fixing a bug where tab selection functionality was broken in the integrations feature.
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-SER-1145-tab-selection-not-working-for-integrations

---

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 integration tab selection by replacing a local isTabSelected check with the shared isTabSelected helper (which uses pathname.includes), so tabs remain highlighted when navigating to child routes of each integration section. It also migrates the layout from Svelte 4 reactive syntax to Svelte 5 runes ($state, $derived, $effect) and adds an immutable ^5.1.5 package override to align the dependency version.

Key changes:

• The shared isTabSelected helper from $lib/helpers/load.ts is now used instead of a local function — the root cause of the original bug.
• let period and $: path converted to $state / $derived; $: reactive statements for commands converted to $effect with proper cleanup.
• Integration tabs extracted into a $derived array (integrationTabs) and rendered with {#each}, reducing template duplication.
• immutable bumped from 5.1.4 to ^5.1.5 via a package.json override; bun.lock updated consistently.

Confidence Score: 5/5

• All findings have been verified; the core functionality is sound and safe to merge.
• The PR safely fixes the tab selection bug by adopting the shared isTabSelected helper with proper pathname matching logic. The Svelte 5 runes migration is idiomatic and correct, with proper cleanup in $effect. The package dependency override is correctly pinned to ^5.1.5 for consistency across both package.json and bun.lock. No genuine issues found.
• No files require special attention

Important Files Changed

Filename	Overview
src/routes/(console)/project-[region]-[project]/overview/+layout.svelte	Svelte 4 → 5 runes migration: replaces local isTabSelected with the shared helper and pathname.includes matching to fix tab highlighting on sub-routes; extracts integrationTabs as a $derived array; migrates $: reactive statements to $effect with proper cleanup of registered commands.
package.json	Adds "immutable": "^5.1.5" override under overrides, pinning to the current major version for stability and consistency with the resolved version in bun.lock.
bun.lock	Lockfile updated to record "immutable": "^5.1.5" override and resolve to immutable@5.1.5, consistent with package.json.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["URL pathname changes"] --> B["isTabSelected called for each tab"]
    B --> C{tab.hasChildren?}
    C -- No --> D["tab.href === pathname?"]
    D -- Yes --> E["selected = true"]
    D -- No --> F["selected = false"]
    C -- Yes --> G{tab.href === pathname?}
    G -- Yes --> E
    G -- No --> H{tab.href === basePath?}
    H -- Yes --> I{any other tab\nmatches pathname?}
    I -- No --> J["pathname.includes(tab.href)"]
    J --> K["selected = true/false"]
    I -- Yes --> L["selected = undefined (fallthrough)"]
    H -- No --> M["pathname.includes(tab.href)"]
    M --> K
    L -. "never reached\nfor these tabs" .-> N["platforms / api-keys /\ndev-keys hrefs ≠ basePath"]

Loading

_{Last reviewed commit: e1a184a}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/routes/`(console)/project-[region]-[project]/overview/+layout.svelte:
- Around line 77-113: The $registerCommands call inside the $effect returns a
cleanup function that must be returned to avoid accumulating duplicate commands;
capture that return value (e.g., const unregister = $registerCommands(...)) and
return it from the $effect so the commands are unregistered when the effect
re-runs or cleans up, while keeping the existing $updateCommandGroupRanks call
(references: $effect, $registerCommands, $updateCommandGroupRanks, and the
command objects for 'Add platform'/'Create API Key'/'Create Dev Key').

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1ccaa606-f6bc-407d-95f9-2bb3dba40c41

📥 Commits

Reviewing files that changed from the base of the PR and between 6138b73 and 1b25051.

📒 Files selected for processing (1)

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