fix: show all tabs when subscription required instead of hiding

[riderx]

Summary

When a user is missing a subscription and visits an app, tabs are now visible instead of being hidden. The content is blurred with a modal overlay floating above, providing better UX consistency with other parts of the app.

Test plan

1. Create an organization without a valid subscription
2. Navigate to any app tab (dashboard, bundles, channels, devices, logs, builds)
3. Verify all tabs are visible in the navigation
4. Verify content is blurred and not interactive
5. Verify PaymentRequiredModal is displayed

Screenshots

The tabs now display with blur effect when subscription is required, matching the design pattern used elsewhere in the app.

Checklist

• My code follows the code style of this project and passes bun run lint.
• My change requires a change to the documentation.
• My change has adequate E2E test coverage.
• I have tested my code manually, and I have provided steps how to reproduce my tests

Summary by CodeRabbit

• Bug Fixes & Improvements
  • Enhanced payment required experience to display a modal notification instead of restricting content access; all application tabs remain visible and accessible.
  • Refactored content visibility logic across app pages for more consistent and streamlined behavior.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Warning

Rate limit exceeded

@riderx has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 1 minutes and 15 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.

📥 Commits

Reviewing files that changed from the base of the PR and between 51cbe87 and 54c3116.

📒 Files selected for processing (1)

• src/layouts/app.vue

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

The PR refactors payment-related UI handling by moving unpaid organization checks from the app layout to individual pages. It replaces tab filtering and route redirects with a blur overlay and PaymentRequiredModal, consolidating logic where payment state is actually checked instead of globally restricting navigation.

Changes

Cohort / File(s)	Summary
Layout payment handling src/layouts/app.vue	Imported PaymentRequiredModal and removed watchEffect. Replaced tab filtering logic with conditional blur effect on main container and modal rendering when organization is unpaid. Removed route redirect logic for unpaid orgs.
Page-level payment simplification src/pages/app/[package].vue	Removed paymentFailed and shouldBlurContent computed properties. Simplified blur and demo-mode conditions to rely solely on appNotFound. Updated chart components and DeploymentBanner to use appNotFound instead of payment state for visibility and demo-forcing. Removed PaymentRequiredModal overlay entirely.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: add payment failure blur modal UI with demo data #1399 — Both PRs modify payment-failure UI patterns and update blur/demo-mode behavior in the same chart components and page layout, indicating coordinated changes to the payment handling flow.

Poem

🐰 The layout bunny hops with care,
Blurs and modals fill the air,
Payment checks now find their place,
Cleaner code at faster pace!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: making tabs visible instead of hidden when subscription is required, which directly matches the primary objective of the PR.
Description check	✅ Passed	The description covers all required sections with appropriate detail: summary explains the UX change, test plan provides clear reproduction steps, and the checklist reflects actual work completed.
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.}

---

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.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 51cbe87554

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Preserve security-compliance priority over payment modal

The layout now renders PaymentRequiredModal whenever currentOrganizationFailed is true, but the previous flow in app/[package].vue only showed this modal when !lacksSecurityAccess so password/2FA enforcement could take priority. With this change, an org that is unpaid and also requires 2FA/password will get the payment overlay while the entire RouterView is blurred and pointer-events-none, which makes the FailedCard actions unreachable. This blocks users from completing security compliance even though that flow is meant to take precedence; consider gating the modal on !lacksSecurityAccess or otherwise preserving that priority.

Useful? React with 👍 / 👎.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud