Highlight changed Solidity code lines

[M3stark]

Refs #219.

This draft PR adds a lightweight visual highlight for Solidity code lines that change after feature toggles.

Notes:

• Tracks the previous generated Solidity source in the UI component.
• Wraps changed lines in a highlight span after syntax highlighting and hyperlink injection.
• Keeps the change scoped to the Solidity wizard first, matching the ERC20/Mintable example in the issue.

Validation:

• Not run locally in this environment.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c2f4a590-8fc4-44fd-80c1-0e1119fa1557

📥 Commits

Reviewing files that changed from the base of the PR and between ac47720 and 911ecc2.

📒 Files selected for processing (1)

• packages/ui/src/solidity/App.svelte

---

Walkthrough

App.svelte now detects and visually highlights lines that change between consecutive Solidity code generations. It stores the prior generated code per contract kind, compares new generated code against the stored version, and renders changed lines wrapped in a CSS class for highlighting while preserving syntax highlighting and hyperlink injection.

Changes

Changed-line highlighting

Layer / File(s)	Summary
Change detection and highlighting renderer packages/ui/src/solidity/App.svelte	State stores prior generated code keyed by contract kind. changedLineNumbers() diffs prior and newly generated source to identify changed lines. highlightChangedLinesFromSource() renders highlighted HTML, wrapping non-empty changed lines in a <span class="code-line-changed"> element while applying syntax highlighting and hyperlink injection.
Integration with reactive contract generation and rendering packages/ui/src/solidity/App.svelte	Reactive contract-generation logic computes highlightedLineNumbers by comparing newly printed code against the stored code for the current kind, updates the code map, and then derives highlightedCode using the new changed-line-aware renderer instead of direct highlighting.
Visual styling for changed lines packages/ui/src/solidity/App.svelte	Global CSS rule .code-line-changed provides visual distinction for changed lines in the rendered Solidity code.

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and clearly summarizes the main change: highlighting changed lines in Solidity code, which is the core feature added in this PR.
Description check	✅ Passed	The description is directly related to the changeset, providing context about tracking previous Solidity code, highlighting changed lines, and the scope of the implementation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[M3stark]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[ericglau]

Thanks for the PR. There's an issue with spacing, as sometimes empty lines are inserted between every line.

But overall I think this should take a different approach in terms of design. Currently the highlights remain visible long after making changes to the selected option, and it's not clear to the user what the highlights mean. Yellow particularly looks like a warning and users may mistaken the highlights as code issues.

Instead, perhaps one of the following would work better, using a combination of transitions and timing:

• Crossing out and/or fading out the lines that are going to be deleted, and after a very short delay (e.g. few hundred milliseconds), replacing those with the new lines.
• Or using some form of green and/or red to briefly show what will be changed
• Or otherwise highlighting the changed lines (perhaps with green) briefly after the new code is applied

But in any case, the steady state (e.g. after a few hundred milliseconds) there should be no long-term highlights visible in the code.

Curious to get your thoughts on the above and whether you would like to make those changes.