Why I'm Keeping Code Review Comments Inline
What if, instead of displaying code review comments inline, we displayed them in a sidebar like Notion does? This is what I have been experimenting with for diffpeek.dev.
See here for the UI mockups generated with Claude Design, then toggle the "Comments" button (next to "Unified/Split" view toggle) from "Inline" into "Sidebar".
Why I thought it would be an excellent idea
At first, I thought it'd be an excellent idea to separate concerns during the code review process:
- the diff
- the comments
And I really like how Notion's comments don't interrupt the reader while they're reading the actual page content and how it's super easy to find out which comment applies to which lines on the page. So I said, why not use this for code reviews?
Why it isn't
- It looks cool, but in the "in view" mode where you only display comments relevant to the lines being currenty viewed, there are tons of moving parts that seems to distract from the sacred code review ritual.
- It looks like it's complex to build and maintain for marginal benefits.
- Your eyes often need to travel left and right to match comment suggestions with actual code lines. For some reason, I find traveling up and down easier, though it could be out of pure habit.
- I even tried a gated scroll (when scrolling through a file in the diff view, once you reach the bottom of the file and keep scrolling down, you start scrolling through the comments in the comment sidebar instead), but I found it cumbersome and maybe only useful in some very niche use cases...
- If long inlined comments are bothering the reader, the reader can still collapse them for minimal impact on reading experience.
For now, I'm keeping comments inline. They may interrupt the diff, but they preserve the spatial relationship between feedback and code. Long comments can always be collapsed. I don't think the sidebar would have made code review significantly better.