Mask-based button hiding, no backdrop

[lawrencecchen]

Summary by cubic

Switches the tab bar to a single combined mask that fades scroll edges and hides the split-button area, letting buttons float without a backdrop. Removes the gradient/solid backdrop so the tab bar background shows through naturally.

• Refactors
  • Replaced fadeOverlays with a new combinedMask applied to the bar.
  • Removed backdrop gradient/rectangle; only splitButtons render above the bar.
  • combinedMask adds left/right fades and a clear button strip when shown, with a short animation.
  • Button show logic, opacity, and hit testing remain the same; no backdrop color calculation needed.

^{Written for commit fbb9057. Summary will update on new commits.}

[coderabbitai]

Warning

Rate limit exceeded

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

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 3 minutes and 18 seconds.

⌛ 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 647b2f8f-efe9-4f17-83b9-f8e2e30f9f52

📥 Commits

Reviewing files that changed from the base of the PR and between 3a025cf and fbb9057.

📒 Files selected for processing (1)

• Sources/Bonsplit/Internal/Views/TabBarView.swift

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch hstack-sibling-buttons

---

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

[cubic-dev-ai]

No issues found across 1 file

[greptile-apps]

Greptile Summary

This PR refactors the split-button area in the tab bar to use a single unified mask (combinedMask) instead of a separate colored backdrop. Previously, the buttons sat inside a ZStack with an explicit gradient-then-solid NSColor-derived background that matched the tab bar fill; now, a mask covers the scroll content (left fade, center solid, right fade, then a fully-transparent button zone) and the buttons float directly on top with the tab bar's own background showing through naturally.

Key changes:

• combinedMask absorbs both scroll-edge fades and the 90 px button-clear zone into one HStack, annotated with a shared easeInOut(0.14 s) animation driven by shouldShowButtons.
• The backdrop ZStack (with buttonBackdropColor compositing and the LinearGradient/Rectangle pair) is fully removed.
• The splitButtons overlay is now a flat view with only saturation, padding, opacity, allowsHitTesting, and animation — much simpler.

Minor cleanup items found:

• buttonFadeWidth (line 580) is declared inside combinedMask but never read.
• fadeOverlays (lines 607–619) is still present but no longer called after the mask switch.
• buttonBackdropColor (line 519) is now unreferenced since the backdrop was removed.

Confidence Score: 5/5

• Safe to merge — the logic is sound and only P2 style/cleanup issues remain.
• All remaining findings are P2: one unused variable and two orphaned code blocks. No behavioral regressions or logic errors were identified. The mask dimensions (24 px fade + 90 px clear = 114 px total) correctly match the existing .padding(.trailing, showSplitButtons ? 114 : 0) reservation for button space, and both the mask and button overlay share the same easeInOut(0.14 s) animation so they remain visually in sync.
• No files require special attention beyond the minor cleanup items noted in TabBarView.swift.

Important Files Changed

Filename	Overview
Sources/Bonsplit/Internal/Views/TabBarView.swift	Replaces the per-button ZStack backdrop with a unified mask (combinedMask) that incorporates both scroll-edge fades and a button clear-area; leaves two dead-code items (fadeOverlays, buttonBackdropColor) and one unused variable (buttonFadeWidth).

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Tab bar frame] --> B[.mask combinedMask]
    B --> C{shouldShowButtons?}
    C -- Yes --> D[Left fade 24px\nif canScrollLeft]
    C -- Yes --> E[Center solid black]
    C -- Yes --> F[Right fade 24px\ncanScrollRight OR shouldShowButtons]
    C -- Yes --> G[Clear area 90px\nhides scroll content behind buttons]
    C -- No --> H[Left fade 24px\nif canScrollLeft]
    C -- No --> I[Center solid black]
    C -- No --> J[Right fade 24px\nif canScrollRight only]
    B --> K[.overlay alignment trailing]
    K --> L{showSplitButtons?}
    L -- Yes --> M[splitButtons\nopacity controlled by shouldShow\neaseInOut 0.14s]
    L -- No --> N[No overlay rendered]

Loading

Comments Outside Diff (1)

1. Sources/Bonsplit/Internal/Views/TabBarView.swift, line 607-619 (link)

   Dead code — fadeOverlays is no longer referenced

   Now that .mask(combinedMask) replaces the old .mask(fadeOverlays), the fadeOverlays computed property (and the now-unused buttonBackdropColor static method at line 519) are orphaned. They can be deleted to keep the file clean.

_{Reviews (1): Last reviewed commit: "Use combined mask for button area (no ba..." | Re-trigger Greptile}

[greptile-apps]

Unused variable buttonFadeWidth

buttonFadeWidth is computed and assigned but never referenced anywhere in combinedMask. It appears to be a leftover from development. Consider removing it.

Suggested change

	let buttonFadeWidth: CGFloat = shouldShowButtons ? fadeWidth : 0
	let buttonClearWidth: CGFloat = shouldShowButtons ? 90 : 0