Make diff stats indicator clickable to toggle review mode

[adboio]

TL;DR

The diff stats indicator in the message editor is now clickable to toggle between split and closed review modes, providing a more intuitive way for users to control the code review interface.

Problem

Users need a quick way to toggle the code review mode without using alternative controls. Making the diff stats indicator interactive provides an obvious, discoverable control point.

Changes

• DiffStatsIndicator component:

  • Converted from a Flex container to a clickable button element with transparent background and pointer cursor
  • Added taskId prop to identify which review task to control
  • Integrated with useReviewNavigationStore to read and update review mode state
  • Added click handler that toggles review mode between "closed" and "split" states
  • Applied inline-flex styling to maintain visual layout while functioning as a button

• MessageEditor component:

  • Passed taskId prop to DiffStatsIndicator component

How did you test this?

The changes maintain the visual appearance of the diff stats while converting it to a functional button element. The component will properly read the current review mode state and toggle it when clicked.

---

Created with PostHog Code