Refactor (packages/web/src/components/share/content-diff.tsx): Function with high complexity

[sanjithag]

P1B: Starter Task: Refactoring PR

1. Issue

#18

/workspaces/opencode/packages/web/src/components/share/content-diff.tsx

What do you think this file does?
content-diff.tsx renders two different views on desktop and mobile of a diff string by pairing removed and added lines that replace each other.

What is the scope of your refactoring within that file?
The rows memo, mobileRows memo, and JSX returned by contentDiff were refactored.

Which Qlty‑reported issue did you address?
Function with high complexity 99 in the rows memo.

2. Refactoring

How did the specific issue you chose impact the codebase’s maintainability?
The contentDiff function had deeply nested loops that made it hard to test and difficult to modify. Reducing the complexity positively impacted the codebase's maintainability by making it easier to test in isolation and to add a new diff-line case if needed.

What changes did you make to resolve the issue?
I extracted the nested logic into small, named, single-purpose functions. I made collectConsecutive, pairRemovalsAndAdditions, unchangedRow, and parseHunkLines for the diff-parsing memo. I made collectChangeBlock and buildMobileBlocks for the mobile-grouping memo. And, I made beforeDiffType, afterDiffType, mobileLineDiffType, DesktopDiffRow, and MobileDiffBlock for the render logic.

How do your changes improve maintainability? Did you consider alternatives?
My changes improve maintainability by reducing complexity such that each function has one responsibility and can be unit tested. Alternatives I considered are to not refactor the render logic and only refactor the two memos, but the render logic significantly contributed to contentDiff's complexity, so I refactored that as well.

3. Validation

How did you validate that the change is correct?
I wrote content-diff.test.tsx to unit test each logic function I extracted (collectConsecutive, pairRemovalsAndAdditions, unchangedRow, parseHunkLines, collectChangeBlock, buildMobileBlocks). Then, I ran bun test --coverage --coverage-dir=./coverage to confirm all tests pass and coverage on this logic is complete, then I reran qlty smells and bun lint on the to make sure the smells were resolved without introducing new lint issues.

Attach a screenshot of the test coverage showing the lines were executed by the tests.

Attach a screenshot showing the tests that cover the change passing during CI

Attach a screenshot of qlty smells --no-snippets <full/path/to/file.ts> showing fewer reported issues after the changes.

Attach a screenshot of bun lint and bun test passing locally (bun test only needs to be run for the package with code changes)