fix(web): collapsed section headers point their chevron down#24438

closed2
main
fix/issue-23950
opened14d agobyJJulius Marminge
View on GitHubTwo-way sync enabledPR last imported 7d ago

Problem

With Snoozed or Settled threads present, collapse either sidebar section: its chevron points up. Expanding points it down, opposite to the app's other disclosures.

Change

Rotate the shared down chevron when expanded. The same correction reaches Working, Previous agents, and workflow phase headers; content visibility, labels, and click handling are unchanged.

Scope and approval

Fixes https://github.com/pingdotgg/t3code/issues/23950 GitCafe: #23950

Triaged bug via the automated issue flow. One shared visual condition; no new option, state, contract, or provider behavior.

Verification

Capture caveat: desktop shelf/drag comparisons retain a small unrelated brand-text raster difference near the top left; it is visible in the unmasked diffs. No claim that nothing else changed.

  • Reproduced in the real web app on main with isolated seeded threads; both shelf headers were inverted while visibility and aria-expanded were correct.
  • After merging current main, vp lint apps/web/src/components/ui/collapsible-section-header.tsx and vp run typecheck in apps/web passed. No automated test was added for this visual-only correction.
  • Two independent code reviewers (GPT-6.1 Sol and Claude Opus 5.5) returned MERGE recommendations.
  • Web at CSS 1440×900 and 390×844, light/dark; Chrome 154 on Linux, DPR 2, root font 16px, zoom/font scaling 100%. Exported PNGs are 1280×800 and 780×1688 respectively. Clock frozen, fonts awaited, reduced motion and transitions disabled consistently. Each accepted endpoint has an RGB-identical partner at least 500 ms later.
  • Desktop uses the shared web component; a separate Electron runtime was not exercised. Native mobile uses a separate, already-correct implementation and is unchanged. No connection, provider, server, persistence, or permission paths changed.
  • Captures below are from before a46f80ee28 and fixed 0593c8bc89, before the final main merge. The final diff remains the same single condition; the shared header and its callers were unchanged on the merged main.

Fixture matrix · Combined evidence index, recordings, seeds and drivers · Original recordings and narrated steps

S = all three shelves; R0 = plain Previous agents; R1 = failed Previous agents; W = running/done/failed workflow phases including plural count; D1 = emphasized Settled during drag; D2 = accent Settled drop target. Intended visible differences are only the shared header rotations. Other labels, counts, tone, and content match within each selected pair, except the disclosed desktop brand raster differences.

Evidence

Diff0 is absolute RGB difference amplified ×16, without threshold. DiffT marks maximum-channel differences >16/255. No masks or excluded regions.

Row / CSS width / theme / stateBefore — a46f80ee28After — 0593c8bc89Diff0 ×16DiffT >16
D1-1440-dark-collapsedBefore: D1-1440-dark-collapsedAfter: D1-1440-dark-collapsedDiff0: D1-1440-dark-collapsedDiffT: D1-1440-dark-collapsed
D1-1440-dark-expandedBefore: D1-1440-dark-expandedAfter: D1-1440-dark-expandedDiff0: D1-1440-dark-expandedDiffT: D1-1440-dark-expanded
D1-1440-light-collapsedBefore: D1-1440-light-collapsedAfter: D1-1440-light-collapsedDiff0: D1-1440-light-collapsedDiffT: D1-1440-light-collapsed
D1-1440-light-expandedBefore: D1-1440-light-expandedAfter: D1-1440-light-expandedDiff0: D1-1440-light-expandedDiffT: D1-1440-light-expanded
D1-390-dark-collapsedBefore: D1-390-dark-collapsedAfter: D1-390-dark-collapsedDiff0: D1-390-dark-collapsedDiffT: D1-390-dark-collapsed
D1-390-dark-expandedBefore: D1-390-dark-expandedAfter: D1-390-dark-expandedDiff0: D1-390-dark-expandedDiffT: D1-390-dark-expanded
D1-390-light-collapsedBefore: D1-390-light-collapsedAfter: D1-390-light-collapsedDiff0: D1-390-light-collapsedDiffT: D1-390-light-collapsed
D1-390-light-expandedBefore: D1-390-light-expandedAfter: D1-390-light-expandedDiff0: D1-390-light-expandedDiffT: D1-390-light-expanded
D2-1440-dark-collapsedBefore: D2-1440-dark-collapsedAfter: D2-1440-dark-collapsedDiff0: D2-1440-dark-collapsedDiffT: D2-1440-dark-collapsed
D2-1440-dark-expandedBefore: D2-1440-dark-expandedAfter: D2-1440-dark-expandedDiff0: D2-1440-dark-expandedDiffT: D2-1440-dark-expanded
D2-1440-light-collapsedBefore: D2-1440-light-collapsedAfter: D2-1440-light-collapsedDiff0: D2-1440-light-collapsedDiffT: D2-1440-light-collapsed
D2-1440-light-expandedBefore: D2-1440-light-expandedAfter: D2-1440-light-expandedDiff0: D2-1440-light-expandedDiffT: D2-1440-light-expanded
D2-390-dark-collapsedBefore: D2-390-dark-collapsedAfter: D2-390-dark-collapsedDiff0: D2-390-dark-collapsedDiffT: D2-390-dark-collapsed
D2-390-dark-expandedBefore: D2-390-dark-expandedAfter: D2-390-dark-expandedDiff0: D2-390-dark-expandedDiffT: D2-390-dark-expanded
D2-390-light-collapsedBefore: D2-390-light-collapsedAfter: D2-390-light-collapsedDiff0: D2-390-light-collapsedDiffT: D2-390-light-collapsed
D2-390-light-expandedBefore: D2-390-light-expandedAfter: D2-390-light-expandedDiff0: D2-390-light-expandedDiffT: D2-390-light-expanded
R0-1440-dark-collapsedBefore: R0-1440-dark-collapsedAfter: R0-1440-dark-collapsedDiff0: R0-1440-dark-collapsedDiffT: R0-1440-dark-collapsed
R0-1440-dark-expandedBefore: R0-1440-dark-expandedAfter: R0-1440-dark-expandedDiff0: R0-1440-dark-expandedDiffT: R0-1440-dark-expanded
R0-1440-light-collapsedBefore: R0-1440-light-collapsedAfter: R0-1440-light-collapsedDiff0: R0-1440-light-collapsedDiffT: R0-1440-light-collapsed
R0-1440-light-expandedBefore: R0-1440-light-expandedAfter: R0-1440-light-expandedDiff0: R0-1440-light-expandedDiffT: R0-1440-light-expanded
R0-390-dark-collapsedBefore: R0-390-dark-collapsedAfter: R0-390-dark-collapsedDiff0: R0-390-dark-collapsedDiffT: R0-390-dark-collapsed
R0-390-dark-expandedBefore: R0-390-dark-expandedAfter: R0-390-dark-expandedDiff0: R0-390-dark-expandedDiffT: R0-390-dark-expanded
R0-390-light-collapsedBefore: R0-390-light-collapsedAfter: R0-390-light-collapsedDiff0: R0-390-light-collapsedDiffT: R0-390-light-collapsed
R0-390-light-expandedBefore: R0-390-light-expandedAfter: R0-390-light-expandedDiff0: R0-390-light-expandedDiffT: R0-390-light-expanded
R1-1440-dark-collapsedBefore: R1-1440-dark-collapsedAfter: R1-1440-dark-collapsedDiff0: R1-1440-dark-collapsedDiffT: R1-1440-dark-collapsed
R1-1440-dark-expandedBefore: R1-1440-dark-expandedAfter: R1-1440-dark-expandedDiff0: R1-1440-dark-expandedDiffT: R1-1440-dark-expanded
R1-1440-light-collapsedBefore: R1-1440-light-collapsedAfter: R1-1440-light-collapsedDiff0: R1-1440-light-collapsedDiffT: R1-1440-light-collapsed
R1-1440-light-expandedBefore: R1-1440-light-expandedAfter: R1-1440-light-expandedDiff0: R1-1440-light-expandedDiffT: R1-1440-light-expanded
R1-390-dark-collapsedBefore: R1-390-dark-collapsedAfter: R1-390-dark-collapsedDiff0: R1-390-dark-collapsedDiffT: R1-390-dark-collapsed
R1-390-dark-expandedBefore: R1-390-dark-expandedAfter: R1-390-dark-expandedDiff0: R1-390-dark-expandedDiffT: R1-390-dark-expanded
R1-390-light-collapsedBefore: R1-390-light-collapsedAfter: R1-390-light-collapsedDiff0: R1-390-light-collapsedDiffT: R1-390-light-collapsed
R1-390-light-expandedBefore: R1-390-light-expandedAfter: R1-390-light-expandedDiff0: R1-390-light-expandedDiffT: R1-390-light-expanded
S-1440-dark-collapsedBefore: S-1440-dark-collapsedAfter: S-1440-dark-collapsedDiff0: S-1440-dark-collapsedDiffT: S-1440-dark-collapsed
S-1440-dark-expandedBefore: S-1440-dark-expandedAfter: S-1440-dark-expandedDiff0: S-1440-dark-expandedDiffT: S-1440-dark-expanded
S-1440-light-collapsedBefore: S-1440-light-collapsedAfter: S-1440-light-collapsedDiff0: S-1440-light-collapsedDiffT: S-1440-light-collapsed
S-1440-light-expandedBefore: S-1440-light-expandedAfter: S-1440-light-expandedDiff0: S-1440-light-expandedDiffT: S-1440-light-expanded
S-390-dark-collapsedBefore: S-390-dark-collapsedAfter: S-390-dark-collapsedDiff0: S-390-dark-collapsedDiffT: S-390-dark-collapsed
S-390-dark-expandedBefore: S-390-dark-expandedAfter: S-390-dark-expandedDiff0: S-390-dark-expandedDiffT: S-390-dark-expanded
S-390-light-collapsedBefore: S-390-light-collapsedAfter: S-390-light-collapsedDiff0: S-390-light-collapsedDiffT: S-390-light-collapsed
S-390-light-expandedBefore: S-390-light-expandedAfter: S-390-light-expandedDiff0: S-390-light-expandedDiffT: S-390-light-expanded
W-1440-dark-collapsedBefore: W-1440-dark-collapsedAfter: W-1440-dark-collapsedDiff0: W-1440-dark-collapsedDiffT: W-1440-dark-collapsed
W-1440-dark-expandedBefore: W-1440-dark-expandedAfter: W-1440-dark-expandedDiff0: W-1440-dark-expandedDiffT: W-1440-dark-expanded
W-1440-light-collapsedBefore: W-1440-light-collapsedAfter: W-1440-light-collapsedDiff0: W-1440-light-collapsedDiffT: W-1440-light-collapsed
W-1440-light-expandedBefore: W-1440-light-expandedAfter: W-1440-light-expandedDiff0: W-1440-light-expandedDiffT: W-1440-light-expanded
W-390-dark-collapsedBefore: W-390-dark-collapsedAfter: W-390-dark-collapsedDiff0: W-390-dark-collapsedDiffT: W-390-dark-collapsed
W-390-dark-expandedBefore: W-390-dark-expandedAfter: W-390-dark-expandedDiff0: W-390-dark-expandedDiffT: W-390-dark-expanded
W-390-light-collapsedBefore: W-390-light-collapsedAfter: W-390-light-collapsedDiff0: W-390-light-collapsedDiffT: W-390-light-collapsed
W-390-light-expandedBefore: W-390-light-expandedAfter: W-390-light-expandedDiff0: W-390-light-expandedDiffT: W-390-light-expanded

Interaction proof

The responsive light shelf recording shows the issue directly: independently open and close Working, Snoozed, and Settled; content visibility agrees with the corrected orientation. The linked original index gives approximate click timestamps and paired recordings for each retained row. The repair index supplies replacement recordings, sampled inspection frames, exact-settling partners, and fixture drivers. Drag recordings hold without dropping, then cancel; collapsed accent uses a selected Settled thread and a slim Snoozed source. Workflow recordings keep the outer toggle open and toggle each phase.

FlowBeforeAfter
Shelves, 390×844 lightRecordingRecording

Independent final proof audit: SUFFICIENT for all six visual rows; independently checked 48 combined pairs and 96 exact settling comparisons. Recordings were sampled rather than reviewed continuously. R0 proves the plain header; three retained combinations use an Idle child rather than Done, so completed-status behavior is not claimed there. Capture head was not rebuilt after the final main merge.

Implementation: Claude Opus 5.5 via Claude Agent harness. Lead, reproduction, evidence and review: GPT-6.1 Sol via Codex harness; independent review: Claude Opus 5.5 via Claude Agent harness.

Checks

24 successful · 12 skipped
All checks passed
e2e2af5

Added 2 commits

  • fix(web): collapsed section headers point their chevron down0593c8b
  • Merge main into fix/issue-23950e2e2af5
Synced from GitHub

Approvability

Verdict: Approved at e2e2af5

Macroscope's review found this PR approvable — This one-line UI correction makes collapsed section headers show a downward chevron and expanded headers show an upward chevron. It is isolated to presentation logic and leaves section state, accessibility state, and content behavior unchanged.

You can add or adjust custom eligibility rules. Learn more.

Synced from GitHub

Review in Change Stack →

No actionable comments were generated in the recent review.

External image Recent review info
External image Run configuration
External image Commits

Reviewing files that changed from the base of the PR and between d53873b6a4799e87afd63c8d288ef0089f5a3748 and e2e2af57b3f9c802d804f68731543f3fe1d571b4.

External image Files selected for processing: 1
  • apps/web/src/components/ui/collapsible-section-header.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 3 remain after this review.

Walkthrough

The collapsible section header now rotates its chevron when the section is expanded. When collapsed, the chevron is not rotated.

Changes: Collapsible section header

Layer / File(s)Summary
Expanded-state chevron direction
apps/web/src/components/ui/collapsible-section-header.tsx
The chevron’s rotate-180 condition now uses expanded instead of !expanded.

Priority: External image Low

Estimated code review effort: 1 (Trivial) | ~2 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: maria-rcks, macroscopeapp

Merge Risk: External image Minimal · up to e2e2a

The focused visual correction presents no identified merge-blocking risk.

Pre-merge checks: Passed 4
Check nameStatusExplanation
Title checkPassedThe title clearly and concisely describes the primary fix: collapsed web section headers now show downward chevrons.
Description checkPassedThe description includes all required sections. It explains the problem, change, issue scope, verification commands, visual evidence, limitations, and implementation details. The UI evidence includes …
Linked Issues checkPassedIssue [#23950] requires collapsed sections to show a down chevron and expanded sections to show an up chevron. The shared CollapsibleSectionHeader now applies rotate-180 when expanded is true. T…
Out of Scope Changes checkPassedThe pull request changes only the shared chevron rotation condition in apps/web/src/components/ui/collapsible-section-header.tsx. The change directly supports issue [#23950]. No unrelated behavior, …
Full details: Description check

Explanation

The description includes all required sections. It explains the problem, change, issue scope, verification commands, visual evidence, limitations, and implementation details. The UI evidence includes before/after screenshots and a recording.

Full details: Linked Issues check

Explanation

Issue [#23950] requires collapsed sections to show a down chevron and expanded sections to show an up chevron. The shared CollapsibleSectionHeader now applies rotate-180 when expanded is true. The unchanged aria-expanded and button behavior preserve expansion and collapse interaction. This change covers Snoozed, Settled, and other callers of the shared header.

Full details: Out of Scope Changes check

Explanation

The pull request changes only the shared chevron rotation condition in apps/web/src/components/ui/collapsible-section-header.tsx. The change directly supports issue [#23950]. No unrelated behavior, state, contract, provider path, or runtime path changed.

Finishing Touches
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

Note

🤖 Claude Opus 5.5 responding on behalf of Theo

Closing: this is covered by #25778, which landed. Reopen if a needed part is still missing.