Skip to content

fix(app): remove titlebar toggle selected chip - #903

Merged
Astro-Han merged 4 commits into
devfrom
codex/titlebar-toggle-no-chip
May 25, 2026
Merged

fix(app): remove titlebar toggle selected chip#903
Astro-Han merged 4 commits into
devfrom
codex/titlebar-toggle-no-chip

Conversation

@Astro-Han

@Astro-Han Astro-Han commented May 25, 2026

Copy link
Copy Markdown
Owner

Summary

Remove the selected-chip background from the titlebar sidebar toggle and right utility panel toggle when they are expanded. There is no standalone issue; this is a direct regression follow-up from the titlebar toggle visual contract restored in PR #880.

Why

The titlebar sidebar/right-panel toggles should express their expanded state by switching icon shape only. PR #880 broadened the .titlebar-icon[aria-expanded="true"] rule so these <Button variant="ghost"> callsites started receiving a selected background chip. That made the sidebar toggle look selected in both light and dark mode.

StatusPopover previously also inherited PR #880's expanded chip through the same broad selector. This PR keeps that StatusPopover contract explicit with a dedicated data hook instead of relying on every expanded .titlebar-icon sharing one visual rule.

Related Issue

No standalone issue — direct regression follow-up from PR #880.

Human Review Status

Pending

Review Focus

Please review the CSS specificity boundary around titlebar-icon:

  • sidebar toggle and right utility panel toggle: expanded idle state keeps the stronger icon color but no persistent selected-chip background; normal hover/press feedback remains visible.
  • StatusPopover fallback: expanded state keeps the PR fix(app): restore titlebar toggle visual contract after PR #878 #880 selected-chip / strong-icon treatment via data-action="pawwork-status-popover-toggle".

Risk Notes

Low. This is CSS plus E2E regression assertions for the titlebar toggles and StatusPopover fallback. The titlebar toggle test now first asserts both toggles are actually expanded, checks idle background is transparent, and checks hover feedback is still visible. The StatusPopover test covers the mobile/non-desktop fallback path that still renders the popover trigger.

During Electron verification, dev:desktop regenerated packages/opencode/src/provider/models-snapshot.js; that unrelated generated file was restored and is not part of this PR.

How To Verify

bun install --frozen-lockfile → installed this worktree's dependencies
bun run --filter=@opencode-ai/app test:e2e session/titlebar-right-rail-contract.spec.ts -g "expanded titlebar toggles" → 1 passed
bun run --filter=@opencode-ai/app test:e2e session/titlebar-right-rail-contract.spec.ts → 9 passed
bun run --filter=@opencode-ai/app test:e2e status/status-popover.spec.ts → 4 passed
bun run --filter=@opencode-ai/app snap right-panel-titlebar → 1 passed; reviewed the light/dark grid locally
bun run dev:desktop → manually verified in the Electron window that the sidebar toggle and right utility panel toggle only change icon shape in expanded idle state, with no persistent selected-chip background
git diff --check → no whitespace errors

Screenshots or Recordings

Generated and reviewed locally with bun run --filter=@opencode-ai/app snap right-panel-titlebar:

  • docs/design/preview/screenshots/right-panel-titlebar.png

The light/dark grid shows both titlebar toggles without selected-chip backgrounds.

Checklist

How to use this checklist:

  • Tick a box by replacing [ ] with [x]. Do not edit, add, or remove items.
  • The bot-applied label items can only be honestly ticked AFTER the PR is opened and the labeler / priority-triage bots have run — return to the PR description and tick them then.
  • Most items are required. The few that are conditional are explicitly marked (conditional); for those, leave unticked if they truly do not apply and explain why in Risk Notes. All other items must be ticked before requesting human review.
  • Type label — this PR carries exactly one of bug, enhancement, task, documentation. Type labels are author-added; the labeler bot does NOT assign them. Add the label in the GitHub UI, then tick this.
  • Routing labels — this PR carries at least one of app, ui, platform, harness, ci. The labeler bot assigns these on PR open based on changed paths. Confirm the bot's choice (or override if wrong), then tick this.
  • Priority label — this PR carries exactly one of P0, P1, P2, P3. The priority-triage bot suggests one on PR open. Confirm or override, then tick this.
  • Human Review Status above is set to Pending, Approved by @<reviewer>, or Not required: <reason> (default is Pending; "not required" is restricted to bot-authored low-risk PRs).
  • I linked the related issue, or stated in Summary why there is no issue.
  • I described the review focus and any meaningful risks.
  • I replaced the example block in How To Verify with the real verification steps and the key result for each.
  • I did not introduce unrelated refactors, dependencies, generated files, or file changes beyond the stated scope.
  • (conditional) I manually checked visible UI or copy changes when needed, with screenshots or recordings. Leave unticked only if no visible UI or copy changed.
  • (conditional) I considered macOS and Windows impact for platform, packaging, updater, signing, paths, shell, or permissions changes. Leave unticked only if no platform/packaging surface was touched.
  • (conditional) I called out docs, release notes, dependencies, permissions, credentials, deletion behavior, generated content, or local file changes when relevant. Leave unticked only if none of those surfaces was touched.
  • I reviewed the final diff for unrelated changes and suspicious dependency changes.
  • I am targeting dev, and my PR title and commit messages use Conventional Commits in English.

@Astro-Han Astro-Han added bug Something isn't working P2 Medium priority app Application behavior and product flows ui Design system and user interface labels May 25, 2026
@coderabbitai

coderabbitai Bot commented May 25, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

@Astro-Han, we couldn't start this review because you've used your available PR reviews for now.

Your plan includes 1 review of capacity. Refill in 32 minutes and 32 seconds.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more review capacity refills, 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 trial, open-source, and free plans. In all cases, review capacity refills continuously over time.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 5c6f6471-1281-413d-9bea-c1fcd244e980

📥 Commits

Reviewing files that changed from the base of the PR and between 0d32b48 and 4bcdf74.

📒 Files selected for processing (5)
  • packages/app/e2e/session/titlebar-right-rail-contract.spec.ts
  • packages/app/e2e/status/status-popover.spec.ts
  • packages/app/src/components/status-popover.tsx
  • packages/app/src/index.css
  • packages/ui/src/components/icon-button.css
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch codex/titlebar-toggle-no-chip

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

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

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested priority: P2 (includes user-path files (packages/app/src/index.css)).

P1/P0 are reserved for maintainer confirmation. Please relabel manually if this is a release blocker, security issue, data-loss risk, or updater/runtime failure.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new E2E test to verify that titlebar toggles do not show a background chip when expanded. Corresponding CSS updates were made to set the background of ghost-variant titlebar icons to transparent. Feedback focused on improving test reliability by using expect.poll to wait for state transitions and refining CSS selectors to preserve hover/active feedback while maintaining a shared visual contract across components.

Comment thread packages/app/e2e/session/titlebar-right-rail-contract.spec.ts
Comment thread packages/ui/src/components/icon-button.css Outdated
Comment thread packages/app/src/index.css Outdated
@github-actions

github-actions Bot commented May 25, 2026

Copy link
Copy Markdown

Perf delta summary

Comparator: pass

Profile / Scenario interaction median interaction worst long task max tbt frame gap p95 frame gap max jank count cls status
default / homepage-cold 24 -> 24 (0) 40 -> 32 (-8) 85 -> 64 (-21) 35 -> 14 (-21) 33.3 -> 50 (+16.7) 116.6 -> 116.7 (+0.1) 4 -> 3 (-1) 0 -> 0 (0) pass
default / long-session-input-lag 48 -> 48 (0) 48 -> 48 (0) 0 -> 0 (0) 0 -> 0 (0) 16.7 -> 16.7 (0) 16.8 -> 16.7 (-0.1) 0 -> 0 (0) 0 -> 0 (0) pass
default / session-streaming-long 48 -> 40 (-8) 64 -> 64 (0) 0 -> 0 (0) 0 -> 0 (0) 16.8 -> 16.8 (0) 33.4 -> 33.4 (0) 0 -> 0 (0) 0 -> 0 (0) pass
default / tool-call-expand 40 -> 40 (0) 40 -> 40 (0) 0 -> 0 (0) 0 -> 0 (0) 16.7 -> 16.8 (+0.1) 16.7 -> 16.8 (+0.1) 0 -> 0 (0) 0 -> 0 (0) pass
default / tool-default-open-heavy-bash 16 -> 16 (0) 24 -> 16 (-8) 69 -> 65 (-4) 30 -> 24 (-6) 50 -> 50.1 (+0.1) 116.6 -> 100 (-16.6) 3 -> 4 (+1) 0.004 -> 0.004 (0) pass
default / terminal-side-panel-open 48 -> 48 (0) 48 -> 56 (+8) 0 -> 0 (0) 0 -> 0 (0) 33.3 -> 33.3 (0) 33.4 -> 33.3 (-0.1) 0 -> 0 (0) 0 -> 0 (0) pass
default / session-scroll-reading 16 -> 16 (0) 32 -> 16 (-16) 0 -> 0 (0) 0 -> 0 (0) 33.4 -> 16.8 (-16.6) 33.4 -> 16.8 (-16.6) 0 -> 0 (0) 0 -> 0 (0) pass

@Astro-Han
Astro-Han merged commit fdf380c into dev May 25, 2026
27 checks passed
@Astro-Han
Astro-Han deleted the codex/titlebar-toggle-no-chip branch May 25, 2026 15:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app Application behavior and product flows bug Something isn't working P2 Medium priority ui Design system and user interface

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant